Is Google Fonts slowing down my website? This is a common question asked by our clients during the on-boarding session. Today, I am going to make everything clear about the topic. Besides, you will get to know some of the methods I follow to make sure Google Fonts are not that culprit, on your way to achieve 100 PageSpeed Insights score.
As I generally write tips for beginners, this article is going to be long with introductions, definitions, explanations and guides on how to do it. If you are already familiar with most of the things listed below, consider clicking on the topic you’re interested to explore.
Introduction to Google Fonts
Choosing the right fonts for a website is one of the primary tasks while designing a webpage. There are numerous free and premium library available to choose from, but Google Fonts stands ahead of these with their collection of 1,364 open source font families. (as of 28 March, 2022)
Recent analytics says that, Google Fonts were viewed 59,897,400,065,904 times (as of 28 March, 2022 23:16:54 GMT+6) and counting. It huge, right?
What does it mean by font optimization?
To be honest, Google Fonts themselves are optimized enough. Their API is not limited to deliver the fonts only. it also check for compatibility and serve the most optimized format supported by the visitor’s browser.
For example, it serves most of the modern browsers with WOFF2, as this one is a highly compressed format and require less bandwidths.
On the other hand, non-supported browsers will be served with WOFF or EOT file formats. These are comparatively less optimized than the previous one.
Font Optimization refers to the following things:
- Texts on a webpage are visible while the fonts are still loading
- Using WebFonts in a way so it loads and render faster
- Reducing the WebFonts size
How to find if Google Fonts are Slowing Down your website
You can easily measure if Google Fonts are causing delays to load your website’s contents. Use PageSpeed Insights to analyze your webpage and look if the First Contentful Paint is taking more than 2.5 s.
Although, there are other things causes FCP issues, fonts are one of the common. Go to “Avoid chaining critical requests” section and check if there are any requests for Google Fonts.
In my case, there were only jQuery so I moved to to “Keep request counts low and transfer sizes small” section.
Carefully see how many requests are there for fonts and what is the transfer size. My website was loading 7 different font files and the transfer size was 216KiB. If you find more than 100KiB then, you should consider optimizing your website’s fonts.
Steps to Optimize Google Fonts without any Plugin
As mentioned above, Google Fonts are optimized itself and the way it delivers the fonts files are great. However, still their are might be spaces to play-with, specially in implementing how those files will be loaded, how many of them will be loaded.
1. Reduce the Number of Font Families
A single font family can add ~400KiB to your page weight, so using several fonts can make your site heavy without any extra cost. :p So, the simple way to optimize your fonts is to reduce the number.
Generally, one or two fonts are okay. However, if you extremely need more then move to the next step.
2. Exclude unused variants
Some fonts can add up to 18 variants by default, but most of the time your website may not use all of them. Luckily, Google Fonts can be loaded dynamically with useful variants only. If a plugin or your theme is loading some variants without necessity, consider excluding them.
Here is how to exclude font variants:
a) Find the code where Google Fonts are being included. It can be something like this:
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
b) Here in this code, all the variants for Roboto are included. It’s normal that your website may not use all of them. So, if you find that you website is only using 400, 400i and 700 then change the code as below:
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">
3. Combine requests for Fonts
For example, you found two different fonts in different places. This means two separate requests are being sent to Google Fonts. Google Fonts API support requesting multiple fonts altogether. So, combining them will save an-extra HTTP requests on every page loads. Here’s how to do it:
<link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,400i,600" rel="stylesheet">
4. Use font-display
font-display is an API used by modern browsers for specifying font display methods. If you use font-display “swap” then it will indicate the browser to display the texts immediately using a system font, during the appropriate fonts are being loaded. It ensures, texts are visible to screen while your site is still loading it’s contents. It greatly improves the “First Contentful Paint” time.
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
5. Preconnect to Google Fonts API
Adding this small piece of code in your child theme‘s header.php will significantly improve the fonts loading performance.
<link rel="preconnect" href="https://fonts.googleapis.com">
6. Preload Global font’s files
There might be fonts being used in all the pages. Preloading their WOFF2, WOFF or EOT files can improve the loading for fonts. Some, popular WordPress caching plugins do this automatically.
7. Prefetch Google Fonts API
DNS prefetching permit the browser to load Google Fonts in parallel with the website. Add the code below in your child theme’s header.php within <head> section to enable prefetching for Google Fonts API.
<link rel="dns-prefetch" href="//fonts.googleapis.com">
Optimize Google Fonts using a WordPress Plugin
For those, who are not confident enough in editing codes or looking for an easy way to solve your Google Fonts loading issue, there are several Free plugins for them. One of my favorite is OMGF, a free WordPress plugin that will automatically host your Google Fonts files in your server thus load them locally.
The configuration process is very simple. After activating the plugin, go to it’s settings page and simply select “Do not load” for unused variants and “Preload” for necessary variants. Then click on the “Save & Optimize” button. It will do the rest.
Note: Don’t forget to clear cache from your WordPress Caching plugin.
This plugin is very easy to configure and is being updated regularly. With 50,000+ active installs, the author was able to secure a rating of 4.6 out of 5.
Here is the result after optimizing Google Fonts:
Hosting Google Fonts is only recommended when you’re using a cache plugin that has been enabled caching for fonts files as well. Otherwise, this is not going to improve the real-world performance. Google Fonts store their font files in the browser cache for a year. So, using popular fonts in your website is going to be a secret performance booster.
Feel free to share your thoughts, feedbacks and questions. I would love to reply.