Eliminate the render blocking effect of Google Fonts and optimize for page speed by loading the font CSS asynchronously and adding
preconnect resource hints.
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 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 once the file is loaded, thereby applying the CSS to the page:
(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
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.
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:
Note the additional
as attribute to specify the type of file being loaded.
Review other helpful preload attributes.
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.
What other resource hints can improve page speed? Learn how and when to use resource hints to maximize loading speed.
With all of these elements working together, Google Font resources now load quickly and efficiently while eliminating the render blocking effect: