Making Google Fonts Load ~20% Faster

1. It loads the text right away, unstyled that is
2. Then when Google fonts are done downloading
3. The text styles are replaced with the Google font

But if you follow Harry Roberts who’s a literal CSS Wizard, his experiments and research led to making Google Fonts even faster by ~20% to ~30%. Let me quote him:

If you’re going to use font-display for your Google Fonts then it makes sense to asynchronously load the whole request chain.

Let’s make Google fonts load faster by following Harry’s findings.

Step #0: Selecting a Google Font#

Go to fonts.google.com and select a font to be used by your site. Let’s say I selected the Montserrat font with 400 and 700 weight for both regular and italic font styles. Google suggests the following embed URL.

<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

Where the CSS URL looks like https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap — let’s call this URL $CSS for the sake of simplicity in the following examples. Notice that the $CSS URL includes &display=swap at the end.

Step #1: Preconnect with fonts’ origin#

If you open the $CSS URL above you’ll notice that the fonts are loaded from the origin that looks like https://fonts.gstatic.com — we can preconnect to this origin.

<!--  Preconnect to the fonts’ origin. -->
<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

✅ Preconnecting to the fonts’ origin is a good idea. It led up to 1200ms loading time saved on the first web page load.

Step #2: Async CSS Fetch#

You can use the Filament Group’s simplest print media type trick.

<link rel="stylesheet"
      href="$CSS&display=swap"
      media="print" onload="this.media='all'" />

Here we ask the browser to load the CSS asynchronously with the print context but as soon as the CSS file is loaded we apply it to the all context.

As a result in Harry’s research, the site’s First Paint is up by 1.6s to 1.7s. However, the first web font however was loaded 500ms slower due to the low priority. Sadly, the print stylesheets are loaded with super low priority.

⚠️ While asynchronous CSS is an overall good idea we need to make the CSS loading a high priority.

Step #3: High-priority async CSS Fetch#

In modern browsers, you can make the async CSS fetch high-priority by preloading the $CSS file.

<link rel="preload"
      as="style"
      href="$CSS" />

Preloading a Google font turns out to be a great idea, Harry found out that the first web font load was 600ms faster than usual. Which means we can use preloading in combination with the print media trick. I’ll recommend using preload trick first and then as a fallback we use the print media trick mentioned in step #2.

✅ preload a Google font is a great idea.

Step #4: Load CSS when JavaScript is disabled#

For instances where a user has intentionally disabled JavaScript in their browser, we can use the <noscript> tag to load the original $CSS as a fallback to everything.

<noscript>
  <link rel="stylesheet" href="$CSS&display=swap" />
</noscript>

Final Snippet#

Finally we end up with the following snippet.

<!-- [STEP #1] -->
<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

<!-- [STEP #3] -->
<link rel="preload"
      as="style"
      href="$CSS&display=swap" />

<!-- [STEP #2] -->
<link rel="stylesheet"
      href="$CSS&display=swap"
      media="print" onload="this.media='all'" />

<!-- [STEP #4] -->
<noscript>
  <link rel="stylesheet"
        href="$CSS&display=swap" />
</noscript>

I most definitely recommend checking out the author’s research and finding here to gain up to 20% load performance improvement for Google fonts.

Direct Link →