Many optimizations we did few years are ago now outdated or not recommended.

Delivering Google Fonts to get maximum performance has also changed recently as browsers implemented new features.

I’ve already written a blog post on optimizing Google Fonts. This post is specifically on why you should self-host Google Fonts.

Also Read

• FFonts

A-Z of Google Fonts Optimization in WordPress

• byGijo Varghese
• May 23, 2020

Outdated Performance Arguments

Argument: Browsers will already have Google Fonts cached

When you embed a Google Font, it first downloads a CSS file from “fonts.googleapis.com” and then downloads font files mentioned in that CSS file from “fonts.gstatic.com”.

Only font files downloaded from “fonts.gstatic.com” has a cache period of 1 year. The main CSS file only has 24 hours of cache lifespan.

“Browsers will already have Google Fonts cached”, yes, but to serve that cached font, the browser needs to download a CSS file every 24 hours, that too is render-blocking in most websites!

If that didn’t convince you enough, here is one more .

New “Cache Partitioning” in browsers for privacy

Chrome and Safari have implemented something called “Cache Partitioning” or “double key caching”.

In simple words, files cached by website A will not be available for website B. When a website A downloads a resource from “example.com/script.js”, cache it, and another website B tries to download the same file, it will have to download it again.

So a Google Font downloaded by a website will not be available for another website in the browser cache.

Under the hood, the browser uses a key to cache files. Usually, the cache key is the URL of the file. But with cache partitioning, the URL of the website which requested the file is also included in the cache key.

Without Cache Partitioning

With Cache Partitioning

You can read more about cache partitioning in Chrome here: Gaining security and privacy by partitioning the cache.

Browser implementation of Cache Partitioning

Chrome: since v86 (October 2020)
Safari: since 2013
Firefox: from v85 (January 2021)

Browsers like Edge, Opera, Brave uses Chromium engine, so expect this feature in other browsers soon.

Also, note that Chrome and Safari alone has a market share of ~80% in browsers.

Argument: Google Fonts delivers optimized fonts based on device/browser

Yes, Google delivers different fonts based on the user-agent.

But as long as you deliver self-hosted Google Font in “woff2” format, you’re targeting ~96% of the browsers.

Only Internet Explorer and Opera Mini don’t support “woff2”. In that case, you can add “eot” as a fallback and still get all advantages of self-hosting.

Here is the sample code:

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
}

Argument: Google CDN is faster

If your website on good hosting or has CDN and has enabled HTTP/2, self-hosting will outperform Google CDN. Because the browser doesn’t have to make extra DNS lookups, SSL handshakes etc and reuse existing HTTP/2 connection.

When you self-host and inline Google Fonts, the browser can immediately start to download the font after receiving the first HTML. You can also leverage preload functionality.

Sia Karamalegos has written a great post on comparing the difference: Making Google Fonts Faster.

Is it Legal to Self-Host Google Fonts?

“Yes. The open-source fonts in the Google Fonts catalogue are published under licenses that allow you to use them on any website, whether it’s commercial or personal.”

Google Fonts – FAQ

In fact, Google itself recommends self-hosting Google Fonts for complete control like preloading. It’s mentioned in one of their YouTube videos:

How to Self-Host Google Fonts in WordPress

OMGF plugin can self-host Google Fonts. But I found it hard to use. We’ve to search the fonts or auto-detect by opening pages manually.

If you’re using FlyingPress, turn on “Optimize Google Fonts”. It will take care of self-hosting, combining and everything for you!

Further Reading

• Chrome’s new ‘cache partitioning’ system impacts Google Fonts performance
• Making Google Fonts Faster
• Say goodbye to resource-caching across sites and domains
• Time to Say Goodbye to Google Fonts

The award for the page that requests the most web fonts goes to a site that made 718 web font requests!

Yes, some designers/developers are lazy and add every possible font they can to make the site look good.

But what about performance?

Just like any other optimization, fonts need a high priority since the text is probably the first thing user see in a website.

This guide will show you different methods to optimize Google Fonts, especially for WordPress.

Use System Fonts Instead

Have you noticed that fonts in Medium.com, WordPress admin, GitHub loads so fast?

Well, all of them use system fonts.

/* System Fonts as used by GitHub */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* System Fonts as used by Medium and WordPress */
body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

System fonts are fonts preinstalled in every OS. Your browser doesn’t need to make extra HTTP requests to download stylesheets or font files.

Yes, zero requests!

The below text is rendered in system font:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Not bad right?

You won’t have a lot of choices in design, but if you want the best performance, go for it!

Limit Font Families & Weights

There are several optimizations that I’ve mentioned below. But limiting font families is the most important one. Ideally, you shouldn’t have more than 2 (max 3) font families.

Similarly, each font will have different weights. It starts from 100 to 900. Including each weight will result in an additional font file to download. So limit the number of font weights too.

If you’re directly embedding font from Google Fonts, you can select different weights like this:

Here is an example of choosing font families and weights in Oxygen:

Credits: WPDevDesign

Use Variable Fonts (New!)

As I mentioned above, for each font-weight, the browser needs to download separate font files. So if you include 400 and 700, two font files will be downloaded.

But in variables fonts, a single font itself can transform into any font weight.

Here is a demo (try changing the font-weight):

Read more about variable fonts: https://web.dev/variable-fonts/.

You can filter fonts in Google Fonts that support variable fonts:

To give you a better understanding, here is the difference:

Here is a sample of variable font with weights from 100 to 900:

<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900" rel="stylesheet" />

Combine Google Fonts

Combining Google Fonts will reduce HTTP requests. It won’t have a big impact in performance with http/2. But still, a good practice to consider.

Before combining:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">

After combining:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto" rel="stylesheet">

If you’re using FlyingPress turn on “Optimize Google Fonts” and it’ll take care of this optimization.

Fix Flash of Invisible Text

If you’re analyzed your site using Google PageSpeed Insights, you might have seen this error “Ensure text remains visible during webfont load”

There is a font-display CSS property which tells whether to show a fallback font while loading the font or make the font completely invisible. If the user is on a slow connection and you haven’t enabled fallback, the user might not see the text for some time, also called Flash of Invisible Text (FOIT).

In Google Fonts, adding “&display=swap” at the end of the URL will fix this issue.

Before adding swap:

<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">

After adding swap:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

FlyingPress can fix this issue automatically. I’ve also developed a standalone plugin for this: Swap Google Fonts Display.

Also Read

• FFonts

How to Fix Flash of Invisible Text (FOIT) in WordPress

• byGijo Varghese
• June 3, 2019

Load Google Fonts Asynchronously

Shall browser wait till CSS and its fonts files are ready to render the page? In my opinion, Google Fonts shouldn’t be render-blocking since a fallback font can be displayed meanwhile.

Lets load Google Fonts asynchronously. Add the following code to <head>:

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto" as="style" onload="this.rel='stylesheet'">

This tells the browser to preload Google Font in the background (without render-blocking) and makes it available as a stylesheet when ready.

Inline Google Fonts

There are different file formats for fonts, like ttf, otf, woff, woff2 etc. Google Fonts CDN is pretty intelligent to deliver different font files based on the user’s device.

But if you only want to support modern browsers, instead of linking to the stylesheet, directly inline the css contents.

The latest font format “woff2” is generally supported (except IE and Opera Mini). It will also have the lowest file size.

Before:

<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">

After (unminified):

<style>
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
....
</style>

This way your browser can reduce a HTTP chain and download the font file immediately.

Add Resource Hints

If you closely look at a Google Font CSS, the stylesheet is downloaded from “https://fonts.googleapis.com/”. However, after downloading the CSS file, each font files are download from “https://fonts.gstatic.com”.

The browser needs to make another DNS lookup after downloading the stylesheet. This can add a slight delay.

By adding resource hints, we can tell the browser that “I’m going to connect to this URL shortly, so make it ready ”.

Add the following line to <head>:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Or using Pre* Party Resource Hints plugin:

Self Host Google Fonts

But why self-host? Google Fonts are delivered from their super fast CDNs and it might have already been cached in the browser, right?!

• The browser cache time for stylesheets is only 24 hours and 1 year for font files.
• Even though fonts are delivered from their CDN, there involves two additional DNS lookups and multiple chained HTTP requests.
• Browsers have started to implement double-key caching. Which means if website A downloads a font and cache it, it will not be available for website B. Safari has already implemented this. Chrome is about to ship. You can read more about it here.
• Self-hosting can leverage your existing connection (http/2).

So it’s always better to self-host Google Fonts!

How to self host Google Fonts in WordPress?

OMGF plugin can self-host Google Fonts. But I found it hard to use. We’ve to manually search the fonts or auto-detect by opening pages.

If you’re using FlyingPress, turn on “Optimize Google Fonts”. It will take care of self-hosting, combining and everything for you!

Conclusion

In the overall web, Google Fonts dominates by the usage of 75%. They’ve put the best effort to optimize them. But that doesn’t mean there is no more room to optimize.

Many of the optimizations can be easily done by installing FlyingPress like self-hosting, preloading, fallback font, combine, load async etc. But no plugin will be able to optimize your design choices.

Add the fonts that you really need, filter out unnecessary font weights and if possible, self host them.

Comment below if you’ve any queries or feedback. I read and reply to each of them within 8 hours!

How do Fonts work in Browser?

Before fixing that error, let’s try to understand how fonts work in browsers.

A font is a file that has extensions like woff2 (best), woff, ttf, otf etc. These files are loaded via CSS with font-face. The code will look like this:

@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster Regular'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v21/neILzCirqoswsqX9zo-mM5Ez.woff2) format('woff2');
}

Now you can apply this font to paragraph or similar HTML tags using the following syntax:

p {
  font-family: Lobster, sans-serif;
}

This tells the browser to apply the font Lobster if available, otherwise, use the default font sans-serif.

Understanding Flash of Invisible Text (FOIT)

To further understand the cause of “ensure text remains visible during web font load”, we need to better understand what is Flash of Invisible Text.

When the browser sees that a custom font is applied to a text, it waits till the font is downloaded. Until that time text will be invisible. Once the download is complete, the custom font is immediately applied. This is known as the flash of invisible text.

To better understand how this is visible on a real site, check this video:

How to Fix Flash of Invisible Text?

Fixing “Flash of Invisible Text” will also fix the error “ensure text remains visible during Webfont load “.

The font-face has a property called font-display and can have values like auto, block, swap, fallback, optional. The one we want is swap. That is font-display: swap.

font-display: swap tells the browser to use the default font until the font has downloaded, after that swap the current font to a custom font.

The full syntax will look like this:

@font-face {
  font-family: 'Lobster';
  font-display: swap; //  ----> the fix!
  font-style: normal;
  font-weight: 400;
  src: local('Lobster Regular'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v21/neILzCirqoswsqX9zo-mM5Ez.woff2) format('woff2');
}

How to fix “ensure text remains visible during web font load” in WordPress?

My premium plugin FlyingPress can fix this in just a single click.

If you want methods, refer to them below:

Fix for Google Fonts

Google Fonts (initially) won’t add font-display:swap to their fonts. However, from the last Google I/O ’19, they now support a new query parameter to set font-display.

If you’re a theme developer or if you’re comfortable with editing code, just add &display=swap to the end of the Google Font URL. See the example below.

But if you’re not comfortable with coding or your theme developer haven’t updated this, just install the WordPress plugin that I’ve developed – Swap Google Fonts Display plugin. It will search for any Google Fonts script and will append display=swap to the URL.

Fix for other fonts

There might be other fonts like font-awesome or icons fonts that are injected by plugins or themes themselves.

Unfortunately, there is no easy way or plugin to fix this. The only way is to go to your Plugins -> Plugin Editor and select the plugin that is injecting the font (analyze your site through Google PageSpeed Insights).

Then find the css file that has @font-face code inside and adds font-display: swap inside it.

Tip: Use the String Locator plugin to find all files containing “@font-face”.

Conclusion

Even though it’s an easy fix, this gives a much better user experience to users. Especially if they’re on mobile devices with a slow networks. That’s why tools like Google PageSpeed Insights also recommend this.

Comment below if you’ve any queries or feedback. I read and reply to each of them within 8 hours!