Skip to main content
Share Your Experience: Take the 2024 Developer Survey
16 votes
Accepted

How can I identify which text within a page is "too small to read" as reported by Google Search Console?

If you run a Lighthouse Audit in Chrome, under the "Document doesn't use legible font sizes" report it will show you the exact CSS selector that is causing the small text issue, and the ...
Maximillian Laumeister's user avatar
8 votes
Accepted

How to Leverage Browser Caching for Fonts in WordPress

Your mime types don't match your ExpireByType directives: $ curl --head https://milyin.com/wp-content/uploads/omgf/neve-google-font-poppins/poppins-normal-700.woff2 ... expires: Thu, 09 Sep 2021 13:24:...
Stephen Ostermiller's user avatar
7 votes
Accepted

Custom font not loading

Ok here is how it should work. The CSS @font-face { font-family: "BellGothicStd"; src: url("fonts/BellGothicStd-Black.otf") format("opentype"); } h1 { font-family: 'BellGothicStd', Arial, sans-...
norcal johnny's user avatar
7 votes

Can I use numbering to decorate headings for readability in CSS without hurting SEO?

Contrary to hurting SEO, I've found that placing numbers next to headings can help SEO in some cases. More specifically, if you have a numbered list of things, sometimes it can qualify your site for ...
Maximillian Laumeister's user avatar
7 votes
Accepted

How can I identify a font from an image and use it on my website?

There are several websites that have font-detection tools. Simply upload the image of your font and it will detect close matches. Just search "detect font from image" and you'll find them. ...
Mike Ciffone's user avatar
  • 6,390
6 votes

How to Leverage Browser Caching for Fonts in WordPress

ExpiresDefault "access plus 2 days" ExpiresByType application/vnd.ms-fontobject "access plus 1 year" ExpiresByType application/x-font-ttf "access plus 1 year" ...
MrWhite's user avatar
  • 42.8k
4 votes
Accepted

What are the safe web fonts and is there anyway around this problem?

You can literality use any font you choose regardless whether or not they have the font installed on their OS. This is done by using CSS @font-face which informs the users browser to download the font ...
Simon Hayter's user avatar
4 votes

Site speed using web fonts - Self-hosted vs Google Fonts etc

From a speed POV using Googles fonts will normally be faster as (a) they will be cached and lots of sites use them and (b) Google will effectively be using a CDN to provide high speed results. There ...
davidgo's user avatar
  • 7,959
4 votes

Site speed using web fonts - Self-hosted vs Google Fonts etc

Google compress their fonts for faster download and if you are using HTTP/1.1 then downloading the fonts from this seperate domain could also result in a performance improvement. Whether Google or ...
Fouad Saada's user avatar
4 votes

Can I use numbering to decorate headings for readability in CSS without hurting SEO?

The featured snippet in Google that Maximillian posted is a good example of where I would use numbered headings. Quick how-to guides, recipes, ranking, anything where the order of events actually ...
Trich's user avatar
  • 601
4 votes

Possible to add a new font to Google font?

You can read through the process of submitting a new font in the Google Fonts Guide. This guide aims to help people navigate the requirements and recommendations for contributing to Google Fonts. The ...
Pete's user avatar
  • 766
3 votes

How to host a custom font on Google Drive (non Google Font) for use on Blogger

You can grab the actual download link (see this reddit post) https://www.reddit.com/r/tabletopsimulator/comments/38h598/hosting_files_with_google_drive/ Basically, put the file id into the direct ...
lex_yey's user avatar
  • 31
3 votes
Accepted

How to make sure Chinese text is rendered in webpage?

If the specified font doesn’t contain a glyph for a character, browsers typically use a fallback font to render this character. (Browsers don’t have do this, of course, and how it exactly works ...
unor's user avatar
  • 21.8k
3 votes

Why gzip compression not working on font file?

Personally, I would not even bother storing Ionicons locally because it is a common library that is hosted on public Content Delivery Networks (CDN). Serving Ionicons from CDN JS in this case //cdnjs....
Simon Hayter's user avatar
3 votes

Trying to determine why same font on two sites renders differently

Okay taking a quick look, I can see that letter spacing is definitely different which has a huge impact on the visual appearance of font. On one site it's: letter-spacing: 0.7px; On other site it's: ...
Richard's user avatar
  • 164
3 votes

How can I identify which text within a page is "too small to read" as reported by Google Search Console?

The intermittency could simply be caused by field data of a few users who's browser portal is small or by periodic changes to Google's algorithm. Have you looked at the page using your browser's ...
Trebor's user avatar
  • 3,270
2 votes

Are there privacy considerations in using Google web fonts?

By embedding the font hosted by google, you are informing Google who your visitor is and that they are visiting your site (their interest), which is a privacy concern. https://www.brycewray.com/posts/...
Roland's user avatar
  • 21
2 votes

Font File or Sprites for Icons

It comes down to size imo. I use font awesome for local development and then once happy I will transform that either into a sprite or base64 whichever is smallest. Font awesome is massive and most ...
Erik Thiart's user avatar
2 votes

Is it possible to block webfont downloads but allow visitors to see them?

Well, this seems to be the only way. Really, all I (or anyone) can do is create layers of defense. Ah well.
NetOperator Wibby's user avatar
2 votes
Accepted

Can I use an unlicensed font that is not sold anywhere?

It would be real headache for you if you were contacted by a lawyer who bought for a penny all copyrights from this defunct company and makes quick money as copyright troll. My opinion: There are so ...
Evgeniy's user avatar
  • 10.1k
2 votes

Would a long article using SVG rendered letters (rather than a font) be performant (usable and scrollable)?

Tried it out. Took about ~5 seconds to render 10,000 icons as inline svgs locally, and scrolling flashes white a little bit. Didn't do any optimization, don't really know what could be done, but doesn'...
Lance's user avatar
  • 531
2 votes

Can I upload duotone custom icons to my kit on Font Awesome?

Unfortunately, it looks like no. According to their Valid SVG requirements, the svg can only have "One path element". Since duotone icons use multiple paths to differentiate the two tones (...
Dan Brellis's user avatar
2 votes
Accepted

SVG and Google Fonts

for svg you should use the html Tag: <svg> in the format : <svg type="text/svg" src="/FileSrc.svg"></svg> Not image or object. & Google fonts are generally included in the ...
Ryan Stone's user avatar
2 votes

How do you use preload links for CSS containing only @font-face?

Since you are attempting to load styles.css which is a style sheet, you should use as="style" If you were loading a font it would look something like this <link rel="preload" ...
Steve's user avatar
  • 8,503
2 votes

What prevents self-hosted licensed fonts being pirated?

From a technical POV, nothing stops you from "pirating" -. If you are found to be infringing you may face legal consequence for copyright infringement. This is no conceptually no different ...
davidgo's user avatar
  • 7,959
2 votes

What prevents self-hosted licensed fonts being pirated?

The direct answer to your question: There is not really a 100% foolproof method to prevent the illegal downloading of custom fonts in 100% of cases. There might be others, but some common practices ...
Mike Ciffone's user avatar
  • 6,390
2 votes
Accepted

Best SEO-friendly approach for icon links?

I still haven't found a clear answer for making icon links easily crawlable, however using JSON-LD the schema validators at least show the search engines will see the schema if you set it up correctly ...
liquidRock's user avatar
2 votes

Why can I use Google web fonts in CSS without an Internet connection or them being installed locally on my computer?

Like other page content, the font is cached in your browser so it doesn't have to load the resources each time the page is requested. If you were to clear your browser cache while offline, you would ...
Jason Bruce's user avatar
2 votes
Accepted

Why does font-family=monospace not render the text with a non-proportinal font?

I've finally found the following setting in Chrome which allows to specfiy a font for Fixed-width font. This setting was set to Monospace. After changing it to Liberation Mono, the monospaced fonts ...
René Nyffenegger's user avatar
2 votes

Possible to add a new font to Google font?

As per my knowledge, it is not possible for you to add a new font to Google Fonts because Google Fonts is a curated library of fonts, and only fonts that meet Google's specific criteria are added to ...
Ravikant's user avatar

Only top scored, non community-wiki answers of a minimum length are eligible