Improving Website Performance with Self-hosted Google Fonts in Gatsby

Since recreating my website using Gatsby, I've been on a quest to improve and squeeze out as much optimisation as I can. One of the last things that flagged up in Google Lighthouse was slow font loading. The fonts I use are Google hosted. So how could I improve loading the fonts more efficiently for site visitors? Self-host them!

After doing some research I was pleasantly surprised at how easy it was, so let me show you how.

At first I discovered Google hosted fonts weren't as fast as I thought they were. Being hosted on Google's powerful servers, and served via a CDN you would think the performance benefits would be massive. CDN served assets would also be cached locally if a user has visited a site using the same resource, further decreasing load time. As an aside, web browsers will soon prevent cross sharing resources between sites, so local cache from CDNs will no longer have any effect, so self-hosting is arguably better long term.

Originally I was using gatsby-plugin-google-fonts to source fonts directly from Google. To self-host fonts, I expected to have to complete the following steps manually:

• Download fonts I wanted from Google Web Fonts
• Store them in Gatsby's static folder
• Preconnect and preload the fonts
• Update my CSS to reference the new location
• Make any additional updates to replace font features that gatsby-plugin-google-fonts has built in, such as use of display: swap.
• Test my fonts work as expected

To make this process a lot easier, there is already a Gatsby plugin available for self-hosting Google Fonts called gatsby-plugin-webfonts and it actually does all of the above automatically. As Gatsby aims to cut out a lot of manual work for developers to do to get things working, this was a perfect example of how easy developing with Gatsby can be.

Setting up gatsby-plugin-webfonts

First, remove the existing google fonts plugin if you have it with yarn remove gatsby-plugin-google-fonts. Then in gatsby-config.js remove gatsby-plugin-google-fonts plugin.

Install the new plugin by running yarn add gatsby-plugin-webfonts. Then add the new gatsby-plugin-webfonts plugin to your gatsby-config.js:

{
    resolve: 'gatsby-plugin-webfonts',
    options: {
        fonts: {
            google: [
                {
                    family: 'Noto+Sans',
                    variants: ['400', '700']
                }
            ]
        }
    }
}

In the above code snippet, I'm telling Gatsby I want to use the gatsby-plugin-webfonts plugin then defining my Google Fonts and their variants. I only use the one Google font on my site but you can easily add multiple font families and variants. Checkout the full documentation.

And that's it! Behind the scenes the plugin downloads the fonts from Google at build time, makes them available in the static folder, preconnects and preloads, and updates the CSS to use them as necessary. The use of display: swap is also built in by default. All I had to do was a quick test to make sure everything still appeared as expected.

Benefits of Self-hosted Google Fonts

Visually there won't be a difference on the website but you will notice that Lighthouse no longer reports "Eliminate render-blocking resources" as an issue.

Again, there used to be benefits to relying on Google-hosted fonts but if you determine they don't outweigh self-hosted fonts for your given circumstances (or your client/boss insists on chasing those last few performance points), it turns out its a breeze to perform for Gatsby-powered websites.