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:

inserir a descrição da imagem aqui

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.

  • Have you tried putting the css code for the font at the bottom of the page instead of the top and then testing insights? Google pagespeed insights doesn't like it when you load render blocking CSS before a page's HTML contents. If you load the font import at the bottom of the page, the HTML will load first and then the font will load second. I'm not sure if this is the issue but there's a good chance that it is. – Michael d May 30 at 21:05

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.

Your Answer

