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.
What is render blocking?
To load Google Fonts asynchronously, reconfigure the font CSS
<link> with a combination of a non-matching
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 CSS
Increase Loading Priority
The loading priority of asynchronously-loaded Google font CSS can also be optionally increased by adding a
onload snippet will be ignored:
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.
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
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
rel="dns-prefetch" can optionally be added after
preconnect as a fallback.
How to configure resource hints for page speed.
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?