Hot answers tagged

15 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 ...
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:...
user avatar
7 votes
Accepted

Google Open Sans font does not display correct weight in Google Chrome

It turns out I had a desktop version of the "Open Sans Light" font installed in my Windows machine. After reading this thread: Issue 340: Open Sans 400 is showing as condensed light in Chrome and ...
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-...
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 ...
user avatar
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" ...
user avatar
  • 41.3k
5 votes

Google PageSpeed, optimizing Google's own elements

You don't have to do everything listed as an optimization. If using a custom font is important to the design of your website then use it. You have a choice between a slightly slower (initial) page ...
user avatar
  • 85.8k
5 votes
Accepted

Firefox 22+ large font workaround

As specified in comments, the extra-large fonts in Firefox would seem to be caused by the font-size-adjust property (which, incidentally, is only support by Firefox currently AFAIK). Removing this ...
user avatar
  • 41.3k
4 votes
Accepted

Performance hit of a lot of unused font-faces

@import in-and-of itself is slow. You shouldn't be using unless absolutely necessary and in this case I don't think it is. Just create a second <link> element to the style sheet with the font ...
user avatar
  • 85.8k
4 votes
Accepted

How to deny direct access to font files used in CSS?

Well this is already done as best it can by default. When you try to access fonts from another domain your browser will block this s a cross origin request (unless you explicitly add a "Access-...
user avatar
4 votes

Can I use web fonts from FontSquirrel on a commercial website legally?

From what I understand, the ability to use fonts on websites is at the discretion of the font's license. For some licenses you are able to modify fonts whilst also being able to redistribute them, ...
user avatar
  • 91
4 votes

Rendering of Raleway (Google Web Fonts) in Google Chrome browser

This is a known issue with Raleway and some versions of Chrome, it's related to anti-aliasing of fonts. This is a fix for windows, using SVG in the css /*FIX FONT FOR GOOGLE CHROME ON WINDOWS*/ @...
user avatar
  • 378
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 ...
user avatar
  • 32.6k
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 ...
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 ...
user avatar
  • 5,845
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 ...
user avatar
  • 601
3 votes

Are there concrete benefits in using png over fonts for icons?

One major advantage of using PNGs is showing icons with more than one color. Also it's well supported by older browsers, althrough the IE 6 will have problems with transparent PNGs. You might want to ...
user avatar
3 votes
Accepted

Can I use Helvetica Neue font free of charge in my website

It's legal to ask the browser to use Helvetica Neue if it's available on the system, but you'd need a license if you want to serve the font yourself. One option is to use Helvetica Neue if it's system-...
user avatar
  • 1,142
3 votes

Can I use free fonts on a website which contains banners?

Yes. Just check the license to make sure that it doesn't have a "Free for non-commercial use only" restriction.
user avatar
  • 1,580
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 ...
user avatar
  • 21.5k
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....
user avatar
  • 32.6k
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: ...
user avatar
  • 144
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 ...
user avatar
  • 2,846
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/...
user avatar
  • 21
2 votes

How to speed up loading of fonts?

There is no way to preload font file effectively, cause browser always waits for appropriate dom element before loading fonts mentioned in css, so you can do only: Use js to make img.src-like preload....
user avatar
  • 156
2 votes
Accepted

How to speed up loading of fonts?

Increasing font speed by using a CDN Ideally you should be using custom fonts on a content delivery system, since Arno Pro is a commercial font by Adobe you should look into using there Typekit ...
user avatar
  • 32.6k
2 votes
Accepted

Can you use 'Italic' in wordpress as separate font, not as alteration of 'Regular'?

You can define the fonts that the browser should use for italic and bold variants in your theme's stylesheet alongside your original @font-face declaration, as shown in this article. For your site, ...
user avatar
  • 20.3k
2 votes
Accepted

Google's cache is not using my custom font

It is normal for sites to look a little bit different in cache view. The cache usually tries to load resources from your server. This is problematic when: Users are using the cache because your ...
user avatar
2 votes
Accepted

Resize font proportional to screen size?

In my CSS I use percentages for font size changes and make sure that font-size is set to inherit on all element types h1 { font-size: 200% } h2 { font-size: 150% } table { font-size: ...
user avatar
2 votes
Accepted

website Font Embedding, which way would be the best for cross browser capability?

Google option is good, but your best option is @font-face. It is supported in almost all browsers (except Opera Mini), which you can see on "can i use" and for the problem of some fonts being rendered ...
user avatar

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