Archived topic
font-display Swap on google fonts
5 replies · Started by Sam on March 22, 2021
Hi, opening a new ticket as suggested by @Tom.
I have font-display Swap implemented and I can see the swap option is implemented. However, Google PSI still complains about this.
From my page source: href=’//fonts.googleapis.com/css?family=Poppins:300,regular,500,600,700&display=swap’
From GPSI: Ensure text remains visible during webfont load
Warnings: Lighthouse was unable to automatically check the font-display value for the origin https://XXXXXXXXXXXXXXXXXX.com.
I am wondering if it is just a technical limitation of GPSI or if I am missing something?
My site is: https://www.supereight.net
It mainly doesn't like the google fonts but also font awesome as well: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.supereight.net&tab=mobile
Let me know what you think.
Hi there,
For FontAwesome:
I'm not sure how you've added this but if you're using a plugin to import FA icons, you should ask the plugin's support on how to do font-display: swap; on their FA icon fonts.
For other fonts from other plugins (Example: TI WooCommerce Wishlist)
As this is another third-party plugin, we're not exactly sure what's the best practice on how to do font-display: swap; for its fonts. It's best to ask its plugin support on the best practice on how to do it./
For Google fonts:
That's weird.
Let's do a bit of testing.
Can you try setting autoptimize's Google font setting to "Leave as is" and try adding this PHP snippet?
add_filter( 'generate_google_font_display', function() {
return 'swap';
} );Let us know how it goes.
Hi Elvin, noted on the two 3rd parties, I am in contact with them.
Regarding your method below, that is what I did originally with the same result. I then switch to try Autoptiize in case it worked differently. But with the same result...
I have switched to your method. Have a look and let me know what you think.
Can you try disabling the 2 third-party plugins mentioned and let's recheck Google PSI?
The flag is marking it 0ms as shown here - https://share.getcloudapp.com/DOuDXzE1 - it's a non-issue.
Right I see what you mean.
Have you tried it and checked Google PSI? Let us know how it went.
