Google Fonts is always a bottleneck for website performance. The Google Fonts' CSS is a render-blocking resource, which means that the browser won't render any processed content until the CSS is loaded. It also causes a blank space when the font is being loaded.
- 1. Google Fonts loading problems
- 2. How to fix Google Fonts problems
- 3. Apply Google Fonts loading techniques in WordPress
- 4. Conclusion
In the previous post of this series, I have shown you a way to get rid of these problems using a script from PerfPerfPerf. Since then, Google Fonts has some updates and the PerfPerfPerf's becomes outdated. And we need a better way to load Google Fonts now!
Google Fonts loading problems
Before going into the solution, let's summarize 2 issues above, as they are the most important problems with Google Fonts. And these are the problems we're going to resolve in this article.
This problem is critical because it freezes your website when loading and increases the loading time of the page. And because loading time is an SEO factor, your site might get a lower ranking.
Blank space while loading Google Fonts
Another problem with Google Fonts is that when it's being loaded, the text is completely vanished before your eyes. Only until it's finished loading, you can see the text.
That causes a really bad experience for your users. And if the loading time is huge, your users might think your website is broken (because they see nothing!).
How to fix Google Fonts problems
Load Google Fonts asynchronously
To solve the 1st problem of render-blocking, we need to load Google Fonts asynchronously. That means we'll load the Google Fonts' CSS without blocking loading or rendering other resources.
There are 2 solutions:
Preloading CSS with
preload is a mechanism to load resources without any effect on loading the other ones. It also puts a higher priority on the resources that are preloaded. That means these resources will be load before other resources. You can read more about this on MDN.
Let's assume you want to load Roboto font. Google gives you the HTML like this:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
To make the CSS preloaded, you need to change it to:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="preload" as="style" onload="this.rel='stylesheet'">
The CSS is now preloaded. And when it finishes loading, it'll be applied.
Using media type
Another solution is using media type, which is supported by all browsers. This technique is created by Filament Group. The HTML markup is simple as follows:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" media="print" onload="this.media='all'">
What it does is loads the CSS for the print-based media. In other words, the CSS is applied only when the users try to print the page. The loading process is now asynchronous (since we're on browsers). And when it's done, the CSS is applied for all media (which includes browsers).
To solve the 2nd problem with a blank is when loading fonts, we need to use
font-display: swap. Basically, it allows us to display the text first with a fallback font family (usually
sans-serif). And when the font is loaded, it swaps the text into the wanted font.
The good news is Google Fonts now supports
font-display: swap by default. You can see it in the font URL like this:
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
display=swap in the URL. The CSS loaded for the font will have
This technique works in all browsers except IE and Edge. On these browsers, the font will still load normally. So, I think it's safe to apply it to our websites.
Just a note that the solution in the 1st part of this series, which uses PerfPerfPerf script, tries to add
font-display: swap to the Google Fonts' CSS. It's not needed anymore.
Apply Google Fonts loading techniques in WordPress
The best way to apply the techniques above is adding the code into your theme's
header.php file. Or you can create a child theme and modify the
header.php file. So your
header.php file will look like this:
<!doctype html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" media="print" onload="this.media='all'"> <?php wp_head(); ?> </head> // Other code
I find it's harder to do this if you use page builders. You need to disable default Google Fonts and apply the code above. The only plugin I found that disables the Google Fonts is Autoptimize. Unfortunately, it removes our manual
link tag, too.
The best solution for page builders is using Autoptimize to preload the Google Fonts. You can turn it on the settings page:
You can see it in action on GretaThemes website.
After applying the new techniques to our websites, I'm quite happy with the result. The loading speed is increased and the FOUT effect is minimal. Users probably don't notice the font change (swapping). And of course, the Google PageSpeed Insights score is higher than before (in my test for MetaBox.io's homepage, it has 100 scores for desktops).
I think optimizing the loading speed for Google Fonts is very important for both users and search engines. And you should do it now. Feel free to discuss this with us on the Facebook group, or leave a comment below.
- The Fastest Way To Load Google Fonts In WordPress!
- The Fastest Way To Load Google Fonts In WordPress (Part 2)