Optimizing Google Fonts on Gatsby Sites
TLDR:
- Don't use an
@import url
for google fonts! - Use the
gatsby-plugin-prefetch-google-fonts
plugin - Go through this tutorial: on Preload critical assets to improve loading speed.
Backstory
We recently built our new ShakaCode.com website using Gatsby.
I noticed that the fonts jumped around a lot. And I hated that!
![ShakaCode Fonts Jumping](./image2.gif)
While doing some work to update React on Rails for Loadable-Components, I was going through this excellent tutorial on Preload critical assets to improve loading speed. Part of the tutorial included some experimentation with fonts and preloading.
Aha! There had to be a problem with the HTML generated for the ShakaCode home page. I bet it doesn't preload! Sure enough, it wasn't! I verified that by searching the page source for the font "Montserrat," which was buried inside a mass of inlined CSS. Yep, no preload!
![Blob of inlined CSS](/static/9c31c49ace1dc4900f1ea6dd0e6948e3/1d69c/image3.png)
I searched the codebase for this font, and I found it inside of a styled-components CSS-in-JS file.
Don't use @import url
for google fonts!
I searched the codebase and found that Montserrat was loaded using the CSS @import rule
.
import { createGlobalStyle } from "styled-components"
const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css?family=Montserrat:600,800,900|Open+Sans:400,400i,600&display=swap');
Using @import
to load Google fonts was exactly what should not have been done. Many search results on this topic pointed to exactly what I observed in the Chrome Dev Tools profiler: "@import" will defer the loading of the resource and slow down the page.
I looked at the performance of loading the fonts on the current live site. In the web.dev tutorial I just mentioned, I got a better understanding of how to use the Chrome Dev Tools Network tab a bit better. To get some better clarity around a slow network, I throttled the network speed just a bit to Fast 3G.
OMG! Of course, the page jumps! The Montserrat font was not even queued until 4.1s!
![Montserrat queued until 4.1s](/static/f505a36dc0a1a2ea8189c9d3386f5fe0/1d69c/image4.png)
Gatsby plugin gatsby-plugin-prefetch-google-fonts to the rescue!
Next, I googled around for the topic of how best to apply Google fonts to a Gatsby site.
Ahh, of course, there was a Gatsby plugin for this issue: gatsby-plugin-prefetch-google-fonts. I just had to add the plugin and remove the old font code. Note, the display=swap
is automatically set by the plugin. While not documented, I did a quick search for swap on the github repo.
The resulting page source shows the preloads.
Now, all the Google fonts load right at the beginning of the page load.
![Fonts load right at the beginning](/static/48a852149a58ee7a9e18b18ab9fa3c35/1d69c/image6.png)
Here's the diff of my pull request to the ShakaCode.com source.
![Diff of the code fix](/static/65631539df8ffc00a7ad17b645a3df05/1d69c/image7.png)
I hope you found this useful!