Hello there fellow web devs and SEOs!
You’re probably here because you know that page load speed is important to search engines and users. You’re also using Google Fonts on your website and you want to make sure you’ve got the snappiest website on all of the internet while still using those cool-looking fonts.
It sucks that fonts, in this case Google Fonts, can be large in file size and sometimes require lots of files if you need many font weights. I think the stat is like 53% of people leave a page if it takes longer than 3 seconds to load and fonts can be a big culprit when it comes to loading speed.
We don’t want people to bail so finding the best implementation is key here. I’m mainly going to cover how we include the fonts on the page. We don't use the standard recommendation from Google and did some benchmarks to find the best method.
I spent a few days researching and benchmarking and the below is what got this website the best results. I tried everything from self hosted to javascript loaded and this was the best.
Best Google Font Implementation For Speed
I’m going to assume that you’ve already pared down your list of fonts. Like, you’re not using literally 10 different fonts each with 10 font weights. That would be impossible to optimize.
Our site uses 2 fonts with 2 weights each. I found that any more than that caused a noticeable increase in load time.
Our method includes a combination of preloading and asynchronously loading the font stylesheet font Google. Our method isn't that different from the suggested method but includes a few tweaks. We do it this way so that it loads in the background and does not render block the rest of the page. You can see this code by viewing the source code on this website.
First, we preconnect to Google’s services:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>Then, we preload the font stylesheet:
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Montserrat:wght@300;700&display=swap" />Then, we asynchronously apply the stylesheet to the page:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Montserrat:wght@300;700&display=swap" media="print" onload="this.media='all'" />And we also have a fallback just in case javascript is disabled:
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Montserrat:wght@300;700&display=swap" />
</noscript>A note on “swap”
You’ll notice we have “&display=swap” at the end of the font URL. If you know this property from CSS, you’ll know that this tells the browser to use a default font while the real font is loading. Once the real font is loaded, it swaps it from the default to the defined font.
This prevents an issue where the text is invisible until the font is loaded and it’s super important. If you already have this in your CSS, you don’t need it here but this is a great catchall spot for it.
