Google Fonts issue

bobjones
(@bobjones)

5 years, 1 month ago

Under Extra Auto-Optimizations/Google Fonts, I had the fourth option selected: “Combine and link deferred in head (fonts load late, but are not render-blocking), includes display:swap.”

However, the wrong typefaces have begun loading on my page.

For now, I’ve changed the Google Fonts setting to “Leave as is”, which allows the appropriate typefaces to display.

Any thoughts on recommended settings for this option?

Thanks!

Viewing 11 replies - 1 through 11 (of 11 total)

Plugin Author Optimizing Matters
(@optimizingmatters)

5 years, 1 month ago

Can you copy/ paste the resulting link href URL from the HTML source when “Combine and link deferred in head” is active Bob?

frank

Plugin Author Optimizing Matters
(@optimizingmatters)

5 years ago

any news Bob?

Thread Starter bobjones
(@bobjones)

5 years ago

Frank, I know how to “show source” from the developer tools, but I see no way to share a url from the source.

However, I can capture the source content of the home page with “Combine and link deferred in head” enabled, and share it with you privately, if that would be of any help.

Plugin Author Optimizing Matters
(@optimizingmatters)

5 years ago

Well, in the HTML source you should see

<link rel="stylesheet" media="print" onload="<...>" id="ao_optimized_gfonts" href="..." />

it is the href value there that is of interest to us 🙂

Thread Starter bobjones
(@bobjones)

5 years ago

How about this?

<link rel="stylesheet" media="print" onload="this.onload=null;this.media='all';" id="ao_optimized_gfonts" href="https://fonts.googleapis.com/css?family=Open+Sans%3A400italic%2C400%2C600%2C700%7CRoboto+Slab%3A400%2C300%2C700&display=swap" />

Plugin Author Optimizing Matters
(@optimizingmatters)

5 years ago

OK, that’s a start. 2nd part is that I would need to see what fonts are loaded when “optimize google fonts” is not active, can you share your site’s URL maybe Bob?

Thread Starter bobjones
(@bobjones)

5 years ago

FranK:

Sent you a note via your site’s contact form.

Plugin Author Optimizing Matters
(@optimizingmatters)

5 years ago

received it, thanks!

your original Google Font CSS request from your site now
https://fonts.googleapis.com/css?family=Open+Sans%3A400italic%2C400%2C600%2C700%7CRoboto+Slab%3A400%2C300%2C700&ver=5.7

and with AO active this becomes
https://fonts.googleapis.com/css?family=Open+Sans%3A400italic%2C400%2C600%2C700%7CRoboto+Slab%3A400%2C300%2C700&display=swap

the difference being the display=swap parameter. I also compared the contents of the two files and there indeed the difference is in the font-display:swap line added to each @font-face which is normal.

Now that (font-)display:swap is there to ensure the Google Fonts don’t block rendering of the page, but as a consequence the page will initially render with system fonts until the Google Fonts are loaded. Is that what you are seeing, or does the problem remain even after the remote fonts have loaded?

Thread Starter bobjones
(@bobjones)

5 years ago

With “combine and link deferred in head”, the problem remains when the site is fully loaded, and I see a lot of undesired fonts.

If you have the time available and would like to contact me privately, I’ll be happy to provide a real-time demonstration!

Plugin Author Optimizing Matters
(@optimizingmatters)

5 years ago

afraid real-time is not something I can get done bobjones, but if you have a stagingsite where you could leave things broken that could work?

Thread Starter bobjones
(@bobjones)

5 years ago

I won’t be able to stage the site, Frank, but appreciate your attention to this issue.

I’ll just check “Leave as is”, since that works best.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Google Fonts issue’ is closed to new replies.