Make Google Fonts faster

January 1, 2021

Has it happened to you that when you load a website for a small period of time (in good network conditions) don't see any text? That's a really bad experience right?

Fonts providers like Google Fonts have adopted the latest CSS good practices by applying font-display: swap; to them. All you need to do is add a &display=swap query parameter to the url.

https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap

What does swap mean to your fonts?

It's good and bad.

At page load, and meanwhile the browser downloads the resource, your font will fallback to something you already have on your system.

font-family: 'Poppins', sans-serif;

In this case, sans-serif will be the one applied first, and when Poppins is successfully downloaded, the browser will "swap" to it.

This is a better experience than not seeing anything at all, but we can improve this by prioritising the font download chain.

Make it better, and then make it faster

By giving some hints to the browser, we can achieve a much better experience:

1. Warm up the font origin.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

2. Make the asynchronous fetch for the CSS file a high priority.

<link rel="preload" as="style" href="[GOOGLE_FONT_URL]&display=swap" />

3. Make a low priority, asynchronous fetch that gets applied to the page only after it's loaded.

<link
  rel="stylesheet"
  href="[GOOGLE_FONT_URL]&display=swap"
  media="print"
  onload="this.media='all'"
/>

4. Last but not least and unlikely but possible, support users with Javascript disabled.

<noscript>
  <link rel="stylesheet" href="[GOOGLE_FONT_URL]&display=swap" />
</noscript>

All together

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="style" href="[GOOGLE_FONT_URL]&display=swap" />
<link
  rel="stylesheet"
  href="[GOOGLE_FONT_URL]&display=swap"
  media="print"
  onload="this.media='all'"
/>
<noscript>
  <link rel="stylesheet" href="[GOOGLE_FONT_URL]&display=swap" />
</noscript>

Where [GOOGLE_FONT_URL] is the font url that Google gives you.

This snippet will make it a high priority to download the font and therefore, it will be applied before.