PageSpeed Insights diagnostic "Ensure text remains visible during webfont load"

Question

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 are loading. Learn more.
URL
    
Potential Savings
…v1/aWB4m0aac….woff2(fonts.gstatic.com)     10 ms
…v21/nuFvD-vYS….woff2(fonts.gstatic.com)    10 ms
…v13/6xK3dSBYK….woff2(fonts.gstatic.com)    10 ms

And I'm trying to correct it by changing

  <link rel="stylesheet" href="https://fonts.googleapis.com" />

to

<link rel="stylesheet" href="https://fonts.googleapis.com/display=swap" />

But this actually throws a console error

---

I know that PageSpeed Insights recommends to add font-display: swap to @fontface, but I don't know what @fontface is.

I'm using Bootstrap and Gatsby

I know there's also gatsby-plugin-web-font-loader. Is there a way to use this to avoid this diagnostic?

---

These are all the times font-family shows up in my program. I'm using scss so most of them are variables

I only specify a font once in my program, and I think bootstrap chooses the font the rest of the time

blockquote > p {
   font-family: 'Montserrat', sans-serif;
}

---

Update, I'm using this plugin now

{
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `Montserrat`,
      `Helvetica Neue`,
      `Helvetica`,
      `Arial`
      
    ],
    display: 'swap'
  }
},

Migration

Answer 1

@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 rel="stylesheet" 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.

Prichard

How do I know which fonts to write in there though? I have one font that I use for blockquotes(Montserrat) and then I think bootstrap chooses the rest of the fonts – Migration

Then you should load Montserrat and Bootstrap fonts there. Bootstrap effects in a really bad way the performance due to the weigh of the package. With custom fonts it will load properly, I don't know if it will work with Bootstrap fonts... – Prichard

Do you know how I can find out what the bootstrap fonts are? – Migration

Inspecting your HTML output on your web or viewing your network. You should be able to see if there is an extra request for CSS fonts. – Prichard

Thanks, I have a question thats not related to this post, I'm trying to add a plugin to load recaptcha but I only need it on two of my web pages. Do you know how to specify to only include it on those pages? Otherwise i think PageSpeed considers it ununsed javascript. – Migration

I've recently implemented the same dependency. You only need to add <Recaptcha> component on your page. Let's say /contact, so add it to contact.js. If all your pages shares the same layout, you will need to check the location with something like: if(location==='/your-page') return <Recapcha> – Prichard

I mean in terms of gatsby-config, if it's imported in there then won't all my pages have it? – Migration

And I just do <div className="m-auto m-sm-0 g-recaptcha" data-sitekey="myKey"></div> – Migration

It's not imported in gatsby-config.js it's imported directly in your pages/components as a component itself. – Prichard

Let us continue this discussion in chat. – Prichard

So I get this now Avoid chaining critical requests 1 chain found Maximum critical path latency: 1,130 ms Initial Navigation example.com example.com /css?family=…(fonts.googleapis.com) - 40 ms, 0 KiB – Migration

I also get these browser errors URL Description /css?family=…(fonts.googleapis.com) Failed to load resource: the server responded with a status of 403 () /css?family=…(fonts.googleapis.com) Failed to load resource: the server responded with a status of 403 () /css?family=…(fonts.googleapis.com) Failed to load resource: the server responded with a status of 403 () /css?family=…(fonts.googleapis.com) Failed to load resource: the server responded with a status of 403 () /css?family=…(fonts.googleapis.com) I clicked the urls though and they lead to a font page – Migration

Answer 2

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;
}

Hypertensive

Are the fonts I want to use just any font that's mentioned in my css? I'm using bootstrap so don't they specify some of the fonts? – Migration

I have added the other way of including a font within stylesheets to my answer. Probably the fonts are included that way if they aren't included via a <link> so have a look through your style sheets and see if you can find @font-face. – Hypertensive

please note <link rel="stylesheet" href="https://fonts.googleapis.com" /> will not do anything by itself so just double check that, you have to specify the font with the family= parameter. That may actually be a problem with your theme. – Hypertensive