SEO - Being penalized by Google Fonts

Asked

Viewed 1,400 times

3

I am using a font that is on Google Fonts on my website and am importing via 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 notifies the following information:

Ensure that the text remains visible while loading the Webfont

Use the CSS font display feature to ensure that the text can be viewed by the user while webfonts are loaded.

Below the notification, are listed all the source specifications I’m importing: inserir a descrição da imagem aqui

Someone’s had this problem before?

You know how this can be adjusted?

I’m with this notification on several sites that use Google Fonts.

google seo pagespeed-insights

1 answer

3


Most likely it’s because of FOUT, FOIT, FOFT, You can read about them here https://css-tricks.com/fout-foit-foft/

Note that you are importing 4MB from sources....

inserir a descrição da imagem aqui

As the site must be loading a lot at a given time the site may appear to be without fonts, or the fonts may "blink", taking time to appear to the user. In the article above you have the details.

It may be that if vc add the property font-display to try to get around this by adding a "fallback" with a local source in case your @font-face take time to load. For this I show you this other article https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

In your CSS basically you would have a code of this type. Note 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 too is important https://css-tricks.com/dont-just-copy-the-font-face-out-of-google-fonts-urls/

  • 1

    Complementing, font-display is a property currently in experimental phase, does not support some old browsers and mobiles, but served as a stopgap measure for Pagespeed to stop complaining... haha

  • I realized that now, in Google Fonts, when I import a font, in the end it comes with the option of font-display, but comes with the property &display=swap; knows how to tell the difference between fallback and swap?

  • 1

    @Mauríciokrüger the documentation does not explain well what is each one, but here is a little better explanation. swap: Instructs the browser to use the fallback font to display the text until the custom font has been fully downloaded. This is also known as "unstyled text flash" or FOUT. fallback: The browser will hide the text for about 100 ms, and if the font has not yet been downloaded, it will use the fallback text. It will switch to the new source after downloading, but only for a short swap period (probably 3 seconds).

  • Two other fonts to deepen the subject https://css-tricks.com/almanac/properties/f/font-display/ and here tb https://css-tricks.com/font-display-masses/ I even have to read more about this rss, there is something that we see once and then forget...

Browser other questions tagged google seo pagespeed-insights

You are not signed in. Login or sign up in order to post.