Asynchronous Google Fonts

Page Speed Checklist

Async CSS + Resource Hints = Speedy Fonts

Eliminate the render blocking effect of Google Fonts and optimize for page speed by loading font CSS asynchronously and adding a preconnect resource hint.

Jump To The Result
Hold On!

Before we get into the finer points of optimizing Google Fonts, don't forget to first apply these strategies to reduce and streamline web fonts. Another important layer in the rich and rewarding tapestry of page speed optimization...

Custom web font services like Google Fonts make it easy to enhance branding with eye-catching headings and stylish text elements. In most cases, using custom Google fonts is as easy as adding a single line of HTML - for example the regular and bold variants of a font called Roboto:

HTML
    <!-- other <head> stuff -->

    <!-- normal CSS reference -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

</head>

Although this file is usually very small for a reasonable number of fonts (~4-6), a conventional render blocking <link> reference for relatively low-priority resources like fonts can impact page speed. Fortunately there's a simple solution to configure Google Fonts to eliminate this render blocking resource.

Loading Google Fonts

As with any custom fonts including self-hosted files, Google fonts are added to the page with a collection of CSS @font-face rules to define each specified font. These rules make the fonts ready and available for use in CSS styling and include a reference to the fonts files themselves - typically WOFF2 or WOFF for modern browsers, but sometimes other formats like TTF and EOT to support older browsers.

As in the example <link> above, the browser first loads and interprets the CSS file that contains the needed @font-face rules and then loads the font files referenced in those rules.

Fortunately for page speed, the font files themselves (WOFF2, WOFF, etc.) aren't render blocking. They load in the background and once fully loaded apply to the page as directed by any CSS styling.

This means that eliminating the render blocking effect of Google Fonts is a matter of loading the font CSS asynchronously.

Asynchronous CSS For Google Fonts

Asynchronous CSS loads a CSS file in the background without the normal render blocking effect, while the rest of the page continues to load.

What is render blocking?

To load Google Fonts asynchronously, reconfigure the font CSS <link> with a combination of a non-matching media attribute value and a bit of JavaScript to update the media attribute once the file is loaded, thereby applying the CSS to the page:

HTML
<!-- other <head> stuff -->

<link rel="stylesheet" href="(font CSS URL)" media="print" onload="this.onload=null;this.removeAttribute('media');">

</head>

(Jump down for the fully-optimized code snippet.)

Get the full scoop on this asynchronous CSS technique for both Google Fonts and other CSS resources:

Asynchronous CSS

Increase Loading Priority

The loading priority of asynchronously-loaded Google font CSS can also be optionally increased by adding a fetchpriority="high" attribute:

HTML
<link rel="stylesheet" href="(font CSS URL)" media="print" onload="this.onload=null;this.removeAttribute('media');" fetchpriority="high">

No-JS Fallback

Because this technique relies on a bit of JavaScript, we can also provide a fallback for users with JavaScript disabled, for whom the onload snippet will be ignored:

HTML

<noscript>
    <link rel="stylesheet" href="(font CSS URL here)">
</noscript>

This is optional, as you may want to intentionally omit custom Google fonts for users with JavaScript disabled to save page weight.

A Head Start With Resource Hints

But that's not all. While the media attribute technique above is the core of asynchronous loading for the font CSS, we can another feature to streamline loading even further.

preconnect

If you're familiar with Google Fonts, you've probably noticed that the CSS file and the font files themselves are loaded from different domains - the CSS file is found on fonts.googleapis.com while fonts.gstatic.com provides the fonts files.

The domain of the CSS file is directly discoverable in the HTML (in the <link> href value) so the browser starts making that connection right away. However since the location of the font files is defined in the CSS, the browser doesn't connect to the domain for the font files until the CSS is loaded and examined.

To get an early start on making that connection and loading the font files, we can use the preconnect resource hint to begin the process:

HTML
<!-- connect to domain of font files -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

For a similar effect in older browsers that don't support preconnect, a second <link> with rel="dns-prefetch" can optionally be added after preconnect as a fallback.

How to configure resource hints for page speed.

All Together

With all of these elements working together, Google Font resources now load quickly and efficiently while eliminating the render blocking effect:

HTML
<!-- other <head> stuff -->

<!-- connect to domain of font files -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- async CSS (optionally increase loading priority with fetchpriority="high") -->
<link rel="stylesheet" href="(font CSS URL here)" media="print" onload="this.onload=null;this.removeAttribute('media');" fetchpriority="high">

<!-- no-JS fallback -->
<noscript>
    <link rel="stylesheet" href="(font CSS URL here)">
</noscript>

</head>

Eliminate More Render Blocking Resources

With this strategy in place to streamline Google Fonts, what's next?

Get more of the same page speed benefit by eliminating other render blocking CSS and JavaScript resources:

Eliminate Render Blocking Resources