1

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'
  }
},
Sam
  • 1,765
  • 11
  • 82
  • 176

2 Answers2

4

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;
}
GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64
  • 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? – Sam Jul 14 '20 at 07:15
  • 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 `` so have a look through your style sheets and see if you can find `@font-face`. – GrahamTheDev Jul 14 '20 at 07:17
  • please note `` 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. – GrahamTheDev Jul 14 '20 at 07:18
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.

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • 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 – Sam Jul 14 '20 at 07:24
  • 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... – Ferran Buireu Jul 14 '20 at 07:27
  • Do you know how I can find out what the bootstrap fonts are? – Sam Jul 14 '20 at 07:29
  • 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. – Ferran Buireu Jul 14 '20 at 07:30
  • Thanks, I have a question thats not related to this post, I'm trying to add a plugin to load [recaptcha](https://github.com/pittica/gatsby-plugin-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. – Sam Jul 14 '20 at 07:34
  • I've recently implemented the same dependency. You only need to add `` 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 ` – Ferran Buireu Jul 14 '20 at 07:39
  • I mean in terms of gatsby-config, if it's imported in there then won't all my pages have it? – Sam Jul 14 '20 at 07:39
  • And I just do `
    `     – Sam Jul 14 '20 at 07:40
  • It's not imported in `gatsby-config.js` it's imported directly in your pages/components as a component itself. – Ferran Buireu Jul 14 '20 at 07:41
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/217780/discussion-between-ferran-buireu-and-sam). – Ferran Buireu Jul 14 '20 at 07:49
  • So I get this now Avoid chaining critical requests 1 chain found Maximum critical path latency: 1,130 ms Initial Navigation http://example.com https://example.com /css?family=…(fonts.googleapis.com) - 40 ms, 0 KiB – Sam Jul 14 '20 at 08:59
  • 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 – Sam Jul 14 '20 at 09:36