All we need is an easy explanation of the problem, so here it is.
I’m using a font that is in Google Fonts on my site and I’m importing through css:
The problem is that the Google PageSpeed Insights n
notifies the following information:
Make sure the text is still visible when you load webfont
Use the CSS font view feature to ensure that text can be viewed by the user while webfonts are loaded.
Below the notification, all font specifications I’m importing are listed:
Has anyone had this problem?
Do you know how this can be adjusted?
I’m having this notification on multiple sites that use Google Fonts.
How to solve :
I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.
Web fonts incur a small performance cost
Penalized is a strong word for this situation. What damage is it really doing you?
You seem to have a whole bunch of web fonts on the site. The simplest thing to do is to limit them, and reduce the size of the problem.
Passing Google’s Speed Test
The way to pass Google’s speed test, and improve your page speed load, involves loading the page before the Web fonts arrive. This will cause a different problem, the Flash Of Unstyled Text, or "FOUT" for short.
This page explains FOUT, and the other ways to avoid web-font-related page load delays. I’d suggest trying "FOUT with a class" from that page.
You followed the directions (mostly)
Looks like you took Google’s advice to use Web fonts, then followed their instructions for loading them – and then were surprised that Google’s own speed tests said there was a problem with your site.
That is indeed what happens – it doesn’t mean you missed a step or anything. The one rule it looks like you bent was including so many fonts (and this made your problem more sizable).
Google’s a big place, and sometimes the advice you get from one team will seem to contradict the guidance from another team. I think the takeaway is: if you include a minimal number of Web Fonts, for languages with smaller alphabets (e.g., probably not Chinese) then the slowdown the Web font causes will be acceptable.
Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂