It goes without saying that Google fonts are really popular, and the total number of google font views is enough to prove that. Till today, google fonts have been viewed more than 59 trillion times across the web.
However, with all its good things and benefits, Google fonts carry a weight that browsers need to download before displaying the fonts. In this case, users need to wait for your page to load which is really frustrating. Fortunately, with correct optimization, you can minimize the loading time.
We all know how important it is to be a faster-loading website to improve user experience as well as ranking. This is why I have come up with this guide to help you with the A-Z of google fonts optimization in wordpress. So, let’s dive in.
Do Google Fonts Slow Down Website?
Though it is unfortunate, still it’s true that Google fonts slow down a website and impacts its performance in so many ways. For example,
- Delayed Text Rendering: When a web font is not loaded, browsers delay text rendering. In fact, it also delays First Contentful Paint (FCP) and Largest Contentful Paint (LCP) in many cases.
- Layout Shifts: If you swap fonts, it can cause layout shifts. Usually, this happens when a web font and its fallback font take up different amounts of space on the page.
A-Z of Google Fonts Optimization In WordPress
Do you know, using Google font, you can access over 1350 font families, and they work great to enhance your website’s design? Still, Google fonts are not as fast as the system fonts; therefore, optimizing the Google fonts is worth improving the website’s performance.
Well, there are a couple of ways to optimize google fonts. So, here’s the A-Z of google fonts optimization in wordpress.
1. Limit Font Families & Weights
As I have stated earlier, Google fonts have 1350+ font families, which means you have so many options to use. However, it is recommended to use 2 font families (one for heading and another for content). Now, you may be wondering why?
Well, different font families come in different weights, and each font can weigh your page up to 400kb. So if you use different font families, your font weight may exceed your entire page. Therefore, it will be better to limit the font families use the right font size, weight, and color to achieve the best performance.
2. Excludes Variants
Many google font families include the full spectrum of available font weights. For example,
- Thin (100)
- Thin Italic (100i)
- Light (300)
- Light Italic (300i)
- Regular (400)
- Regular Italic (400i)
- Medium (600)
- Medium Italic (600i)
- Bold (700)
- Bold Italic (700i)
- Black (800)
- Black Italic (800i)
This is the default code to implement Google font-
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
But, there is a problem with using this code snippet. If you use this code, it will only load the ‘regular 400’ variant and the other variants like light, bold and italic text won’t be displayed correctly.
In that case, you can specify the weights in the URL just like the following.
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
But, the fact is a regular website doesn’t actually require downloading all these variants. Therefore, instead of adding all the font variants, you should specify the weights you need in the URL.
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,600" rel="stylesheet">
3. Combine Google Font Requests
Generally, the more HTTP requests your website makes, the more time it will take to load. In that case, combining the Google fonts is considered good practice to reduce the HTTP requests.
So, if you want to load two fonts, the code will look like this-
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
But, with this code, two requests will be made, and this is where you need to combine them into a single request. So, following the below code, you can combine the Google font request-
<link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,400i,600" rel="stylesheet">
4. Font Display
In general, browsers take time to display the Google fonts, and at this time, users see blank space where the texts should have been. It is commonly known as FOIT, which means Flash of Invisible Text.
This FOIT is really bad for your website’s user experience. So, to ensure a better experience, all you can do is show a system font as a fallback initially, and the fonts will be “swapped” when ready. And you can do this using the CSS font-display property. It will tell the browser to display the fallback font as soon as possible until the Google font is ready.
So, just like the following snippet, add font-display: swap; to the @font-face declaration.
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}
And, while using Google fonts, you just need to add &display=swap at the end of Google Fonts UR to implement font-display.
For standard –
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
For @import –
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
</style>
5. Load Google Fonts Asynchronously
As a fallback font can be displayed while Google fonts are getting ready, that’s why it should not be rendered-blocked. Adding the following code to <head>, you can let Google fonts load asynchronously. It will tell the browsers for preloading the Google font in the background without causing render-blocking.
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto" as="style" onload="this.rel='stylesheet'">
6. Use The Text Parameter
The text parameter is a little-known and very rarely used function. It helps you by only allowing you to load the characters you need. You can use the text parameter for only loading the characters if your website consists of a text logo. For example,
https://fonts.googleapis.com/css?family=Roboto&text=CompanyName
Note: If you use the text parameter, by default, it will only load the “normal” font weight. Therefore, you must define or specify another weight in the URL if you want to add it, just like the following.
https://fonts.googleapis.com/css?family=Roboto:700&text=CompanyName
7. Inline Google Fonts
You will find different font formats like EOT, TTF, OTF, WOFF, WOFF2, etc. Based on the users’ device, google fonts CDN delivers different font files. However, if you only want to support modern browsers, you can inline the CSS content directly instead of linking to the stylesheet.
As you can see from the above image, WOFF 2.0 is supported by maximum browsers except for IE and Opera Mini. Except for this one thing, it is the best format to use as it can provide the advantage of additional compression. In fact, it offers the lowest file size, on average a 30% reduction in file size.
8. Add Resource Hints
Resource hints can effectively boost website performance by telling the browser that you will connect to this particular URL shortly, so make this one ready. In this guide, I’ll discuss two types of resource hints, like-
- DNS Prefetching, and
- Preconnect
So, let’s have a look at how they work.
DNS Prefetching
With DNS prefetching, you can allow the browser to connect to Google’s Fonts API (fonts.googleapis.com) immediately after the page starts loading. This implies that some work will already be done when the browser is ready to request.
Now, add the following one-liner to implement DNS prefetching for Google font.
<link rel="dns-prefetch" href="//fonts.googleapis.com">
Preconnect
Preconnect is the advanced version of prefetch, which completes the TLS negotiation and TCP handshake, in addition to performing a DNS lookup. Using the following snippet, you can almost reduce your website’s page loading time by 100ms.
So, add the following line to <head> for implementing preconnect.
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
9. Self Host Google Fonts
The best part is you have the freedom to use, change, and distribute the Google font without requiring permission. This means if you don’t want to use Google’s hosting, you can self host them. You will find all the Google fonts files on Github. Additionally, you can use this google-webfonts-helper to choose the fonts you require with the files and CSS.
Note: When it comes to self-hosting Google Fonts, you need to remember that you are saving the current font versions. You won’t be able to use the improved fonts when they get updated.
10. Using Plugins
Last but not the list, one of the easiest ways to optimize Google font is using a WordPress plugin. Using plugins, you don’t have to worry about putting the codes; they will do everything without requiring any coding. So, here are some plugins that you may consider using-
Wrapping Up
Google font optimization is not that easy, and it is a bit of a complex process. But with the help of this guide about A-Z of google fonts optimization in wordpress, you may find it easier to deliver your website font. Implementing all these hacks or tactics can have a huge impact on your WordPress site.
You can find the most suitable method for your site by trying each of these by yourself. So, start adding the fonts you want, filter out the unnecessary weights of the fonts, and finally, self host Google fonts if possible.
Let us know how many of the above techniques you have tried and their result. Also, if you face any difficulties, feel free to share.
