The question:
I’m using a font that is in Google Fonts on my site and I’m importing through css:
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,300i,400,400i,600,600i,700,800,900');
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.
The Solutions:
Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.
Method 1
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.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0