Asynchronous Google Fonts
Page Speed ChecklistAsync 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.
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:
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.
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:
(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 CSSIncrease Loading Priority
The loading priority of asynchronously-loaded Google font CSS can also be optionally increased by adding a fetchpriority="high"
attribute:
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.
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:
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:
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