Optimizing WordPress Google Fonts has become more imporant than ever! Ever since the GDPR has made it mandatory to host Google Fonts locally website owners have been scourging the web to find a solution.
What if I told you there’s more to WordPress Google Fonts optimization than just copying the files to your server? This shouldn’t come as news to long-time OMGF users, but to the thousands of users OMGF has gained in the past month; this one is for you.
Table of Contents
General Optimization
1. Host Google Fonts Locally
Although there’s more to WordPress Google Fonts optimization than hosting them locally, it is an important step in the optimization process. Why? Because it gives you full control of the loaded files. Besides that, hosting Google Fonts locally has some important advantages over loading them from Google’s CDN:
- Reduces DNS lookups: the browser doesn’t have to make an additional connection to other servers and can pull the font files from the server it is already connected to, i.e. your server. This’ll speed up your website’s loading time. Ofcourse results may vary, depending on the amount of font styles/files you’re using.
- GDPR compliance: ever since a court in Germany ruled that using Google Fonts’ default implementation is illegal for websites receiving European visitors (i.e. every website) you could say that serving Google Fonts from your own server is now a requirement. For European website owners, it’s an important step in making your website GDPR compliant.
- Leverage Browser Caching: according to Google’s FAQ the stylesheets are cached for 1 day and the font files are cached for 1 year. This allows them to publish updates for fonts. It also means that your users will have to download a new stylesheet every time they visit your website. Serving the stylesheet (and the fonts) from your server gives you full control and allows you to extend the browser caching period for (CSS) stylesheets to e.g. 1 year.
As of October 2020, the remaining benefit of Google’s CDN (fonts.googleapis.com and fonts.gstatic.com) disappeared. Chrome moved to HTTP cache partitioning. As a result, Google Fonts are now redownloaded for every website, regardless of it already being cached in a user’s browser.
After OMGF, many other WordPress plugins, like PerfMatters, Flying Press and LiteSpeed Cache, have implemented an option to copy Google Fonts to your server.
If you’re using any of these plugins, you might consider using the integrated option to host your Google Fonts locally. Just know that the featureset with all of these plugins is limited:
- It’s possible to Preload Google Fonts, but with a bit of a workaround. You have to copy URLs pointing to the font files from your browser’s developer tools and paste them in the plugin’s Preload Files option.
- None of these plugins can detect/replace Google Fonts loaded through
@importstatements,@font-facestatements or Web Font Loader. - Support is limited to downloading Google Fonts, i.e. you can’t Remove unused Google Fonts.
If your website is loading Google Fonts using @import statements, @font-face statements (either through inline <style> blocks or in local (CSS) stylesheets) or Web Font Loader; upgrade to OMGF Pro and enable the corresponding option in its Detection Settings.
How to Host Google Fonts locally in WordPress using a Plugin
Whichever plugin you’ve chosen, downloading WordPress’ Google Fonts to your server is easy:
In PerfMatters it can be enabled from within its Fonts tab and Flying Press features a Optimize Google Fonts option.
LiteSpeed Cache used to have a localization option available, but it was removed about a year ago. Due to recent (GDPR related) developments they’ve promised to bring it back soon.
If you’re using any additional CSS/JS optimization plugins, e.g. Asset Cleanup, Autoptimize or WP Fastest Cache, make sure you disable any settings related to Google Fonts optimization as they might prevent OMGF from properly detecting any Google Fonts. Be sure to check the list of known issues with 3rd party plugins.
Just like the above mentioned plugins, OMGF also features a one-click setup to download your WordPress Google Fonts.
After installing the plugin, simply navigate to its settings screen (Settings > Optimize Google Fonts) and:
- Scroll to the bottom of the page, the default settings will suffice,
- Click Save & Optimize.
After being hypnotized by an incredible looking loading spinner for a while, you should see a success message and one or more stylesheets listed in the Task Manager section.
That’s it!
Now your Google Fonts are downloaded and will be served to your visitors from your server.
To maximize your WordPress Google Fonts performance, some additional steps are required.
2. Preloading Font Files (Above the Fold)
Effectively prioritizing static assets on your website can make a huge difference in your website’s perceived loading speed and therefore increase your score in PageSpeed Insights. Static assets are:
- Images (JPG, PNG, WebP, etc.)
- JavaScript (JS) scripts,
- (CSS) Stylesheets, and
- Font files (WOFF2, WOFF, TTF, etc.)
Properly preloading WordPress’ Google Fonts will reduce Cumulative Layout Shift and Largest Contentful Paint (LCP) time. You should never simply preload all font files — I see this a lot — because this will negatively impact LCP and First Contentful Paint.
Preloading the wrong resources will also send browsers complaining that a resource was preloaded using link preload but not used within a few seconds.
The only resources that should be preloaded using link preload are resources that are used above the fold. Nothing else.
Remember, it’s all about perceived loading speed. We want the stuff above the fold to be loaded first so user’s won’t get frustrated and bored — and leave. Everything else can wait.
It's all about perceived loading speed. We want [everything] above the fold to be loaded first [...] Everything else can wait.
Above the fold resources are all static assets that are visible immediately, on pageload, without scrolling. Ideally each page on your website uses the same fonts above the fold. This increases overall performance — and brand recognizability.
To detect what fonts are in use, we’re going to use a browser extension, called WhatFont. It’s available for Firefox, Chrome and Safari.
After installing the extension in your browser of choice, open up your site’s homepage, a blog post or landing page — whichever represents a good “average” page on your site. And whatever you do, don’t scroll down!
Click the WhatFont-icon (
)and click on each text element that carries a different style, e.g. menu items, headings, paragraphs in slider, etc.
Take note of each different font family and font style mentioned in the title of the box.
Once you’re done compiling your list, move on to the next chapter.
Preloading font files in WordPress using a Plugin
Each of the plugins mentioned earlier have a preload feature, but you have to copy each URL manually and paste it in the plugin’s preload option. If you’re set on using one of them, you’ll have to figure out the URL for each font file. Firefox’ integrated Developer Tools has a Fonts tab, which reveals this information
In OMGF, all you need to do is check a few boxes to preload WordPress Google Fonts.
From within WordPress’ admin area, navigate to OMGF’s settings screen: Settings > Optimize Google Fonts:
- Scroll down until you reach the Manage Optimized Fonts section,
- Check the Preload box next to each of the font styles, and
- Click Save & Optimize.
You’re done!
OMGF will properly preload Google Fonts used above the fold.
Advanced Optimization Methods
3. Remove unused Google Fonts
If you’re not using OMGF (free) at this point, and insist on using PerfMatters, Flying Press or an equivalent plugin to optimize your Google Fonts, you can stop reading here. These plugins don’t allow removing unused Google Fonts or any other type of advanced Google Fonts optimization.
Now you’ve optimized Google Fonts above the fold it’s time to remove any clutter and speed up Google Fonts further down the page.
Remove unused Google Fonts to reduce requests, page size and effectively speed up page loading times.
Scroll down your page and identify each font and font style used on your website using WhatFont. If need be, click through a couple of pages to make sure you haven’t missed anything.
When you’re done compiling your list, head back to OMGF’s settings screen, check the Do not load box for each font that isn’t on that list and click Save & Optimize.
Pro-tip! Modern browsers are perfectly capable of mimicking italic font styles. I highly recommend using OMGF’s unload italics feature to make sure no italic font styles are loaded in your site’s frontend.
4. Specify a Fallback Font Stack
The last thing you can do to optimize your Google Fonts is to add a Fallback Font Stack.
A fallback font stack is basically a set of system fonts for different operating systems, that’re used by the browser if the defined Google Font isn’t loaded (yet). Applying this effectively further reduces Cumulative Layout Shift and speeds up perceived loading speed.
It’s very uncommon for theme developers to include fallback font stacks when adding Google Fonts to their product. Understandable. It’s simply too much effort to find a matching system font for each operating system and for each Google Font.
Fortunately for you, OMGF Pro makes it easy to include a Fallback Font Stack with each Google Font in your WordPress configuration. You can use the font style matcher to select a system font which is closest to your Google Font.
Using OMGF Pro, you can also choose to replace (one of) your Google Fonts with system fonts. This will reduce the amount of requests the browser needs to make for the page to fully load, i.e. even faster page loading times!
In the default Twenty Sixteen theme, replacing Google Fonts with System Font Stacks saves ~60KB!
Conclusion
Optimizing Google Fonts is important for performance and legal (GDPR) reasons. Today we’ve discussed several ways to optimize the loading of Google Fonts using a plugin for WordPress.
General optimization can be done by several plugins and basically consists of hosting Google Fonts locally.
Google Fonts optimization goes further than just downloading them to your server. Many theme developers include more Google Fonts styles (and subsets) than needed, bloating your page size.
That’s why we’ve explored other options (only) available in OMGF (Pro), such as:
- Preload Google Fonts above the fold using a browser extension called WhatFont.
- Remove unused Google Fonts, and
- Specify a Fallback Font Stack to reduce Cumulative Layout Shift or,
- Remove Google Fonts entirely and replace them with System Font Stacks to reduce page load times.
Which actions have you taken to optimize your Google Fonts? Let me know in the comments!
Thank you for sharing the easy and important steps that are very helpful in the optimization process. The plugins have the very advantages that you shared with us.
Can I use the combined option to host your Google Fonts locally by using the PerfMatters plugin?
Plzz give me an answer.
PerfMatters has limited support for Google Fonts optimization. Yes, it allows you to host Google Fonts locally, but that’s it. More often than not, themes/plugins include Google Fonts you don’t use. That’s why I (and I know, I wrote the plugin) I’d still recommend using OMGF for your Google Fonts optimization, even if you’re already using PerfMatters.
I have been using CAOS and OMGF for some time and find them very useful, soon I will get the Pro versions (as you have to to make full of anything these days)
Keep up the food work and thanks.