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 the font CSS asynchronously and adding preload and preconnect resource hints.

Jump To The Result

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 the render blocking resource.

Learn more about managing and prioritizing critical vs non-critical resources to maximize website speed.

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> reference 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 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 Font CSS

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

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 goes here)" media="print" onload="this.onload=null;this.removeAttribute('media');">

</head>

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

For the best results, learn more about asynchronous CSS techniques for both async Google Fonts and other CSS resources:

Asynchronous CSS

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. This is optional, as you may want to intentionally omit custom Google fonts for users with JavaScript disabled to save page weight:

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

A Head Start With Resource Hints

But that's not all! While the media attribute technique is the core of asynchronous loading for the font CSS, we can add a few other features to streamline loading even further.

As is, the async Google Fonts CSS will load in the background but also at a low priority. Using HTML resource hints can increase loading priority in the browser and also get a head start on loading the needed font files that are specified in the CSS.

preload

The method for asynchronous CSS above starts loading the font CSS file right away, but because the initial media value doesn't apply to the page, it does so at a low priority. That priority can be optionally increased with a preload resource hint:

HTML
<!-- optionally increase loading priority -->
<link rel="preload" as="style" href="(font CSS URL)">

Note the additional as attribute to specify the type of file being loaded.

Review other helpful preload attributes.

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.

What other resource hints can improve page speed? Learn how and when to use resource hints to maximize loading 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>

 <!-- optionally increase loading priority -->
<link rel="preload" as="style" href="(font CSS URL here)">

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

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

</head>

Loading Structure

Along with loading Google Fonts asynchronously, what else can you do to eliminate render blocking resources and optimize the loading process? Reconfigure all CSS and JavaScript resources to maximize page speed:

Loading Structure