Pagespeed Insights Diagnostic "ensure Text Remains Visible During Webfont Load"

I'm getting the diagnostic on PageSpeed Insights Ensure text remains visible during webfont load Leverage the font-display CSS feature to ensure text is user-visible while webfonts

Solution 1:

You made a minor mistake.

It should be

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=TheFontYouWantToUse&display=swap />

If you do a forward slash as shown in your example it will result in a 404 not found, hence the console error. Replace it with a URL parameter (&) and it should work fine.

@fontface is just a way of loading a font from within a stylesheet.

For example within your main CSS file you could add the following and that would also load the font in. Notice the font-display property set to swap.

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

Solution 2:

@font-face is a rule that allows you to use multiple font-family rule instead of loading it in each selector.

Among all font plugin of fonts in Gatsby I recommend gatsby-plugin-google-fonts because it allows you to display and swap between fonts.

 plugins: [
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [
          `limelight`,
          `source sans pro\:300,400,400i,700`// you can also specify font weights and styles
        ],
        display: 'swap'
      }
    }
  ]

It's really useful since it's preloading the font without affecting the display (due to the swap property).

With Gatsby, <link href="https://fonts.googleapis.com" /> this configuration is automated so you don't need to touch it. It's better to pre-render them using a plugin, since it's the power of Gatsby.