SEO - being penalized by Google Fonts
I am using a font that is in Google Fonts on my website and I am 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 Google PageSpeed Insights notifies the following information:
Ensure that text remains visible while loading webfont
Use the font view CSS feature to ensure that text can be viewed by the user while webfonts are loaded.
Below notification, all font specifications I am importing are listed:
Has anyone had this problem?
Do you know how this can be adjusted?
I have this notification on several sites that use Google Fonts.
1 answers
Most likely it is because of the FOUT, FOIT, FOFT, you can read about them here https://css-tricks.com/fout-foit-foft /
Notice that vc is importing 4MB of fonts....
As the site should be loading a lot of stuff at a given time the site may appear to be without fonts, or the fonts may "Flash", taking time to appear pro user. In the article above has the details.
It may be that if you add property font-display to try to get around this by adding a " fallback" with a local Font in case your @font-face takes time to load. For this I indicate this other Article https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
In your CSS basically vc would have such a code. Notice the Font Format .ttf
@font-face {
font-family: ExampleFont;
src: url('https://fonts.googleapis.com/css?family=Montserrat:100,300,300i,400,400i,600,600i,700,800,900') format('woff2'),
url('https://fonts.googleapis.com/css?family=Montserrat:100,300,300i,400,400i,600,600i,700,800,900') format('truetype'),
font-weight: 400;
font-style: normal;
font-display: fallback;
}
Read this tb is important https://css-tricks.com/dont-just-copy-the-font-face-out-of-google-fonts-urls /