Ensure text remains visible during webfont load. When optimizing your WordPress site for Google PageSpeed Insights you will probably come across this optimization suggestion if you use Google Fonts or any other type of Webfonts.
The language Google chooses to describe its optimization suggestions (or anything, really) can be confusing. That’s why I thought it’d be a good idea to zoom in on what it means to ensure that text remains visible during webfont load and how to fix it.
What does this PageSpeed Insights optimization suggestion mean?
Whether you’re a WordPress blogger, developer or site configurator, chances are you’re using plugins. Some of you might’ve even gotten all fancy (not!) and created yourself a plugin jungle!
Plugins that perform actions in your site’s frontend often add stylesheets and webfonts to your pages and posts. Themes do, too.
A webfont is declared inside a stylesheet with a so-called
@font-face statement. This is the part Google PageSpeed Insights is pointing at.
Let’s say we have an imaginery WordPress website, with a stylesheet that looks like this:
The attribute which ensures that text remains visible during webfont load is the
font-display attribute. In our
@font-face statement above, this attribute is missing.
If we ran our imaginary WordPress blog through Google PageSpeed Insights, it would’ve given us the optimization suggestion to ensure text remains visible during webfont load.
To achieve this, we need to add the
font-display attribute to our
@font-face statement. So it’ll look like this:
The order of the attributes isn’t important and
font-display accepts several valid values, but
swap is by far the best performing.
At this point the optimization suggestion would’ve been eliminated and our PageSpeed Insights score would’ve risen.
Unfortunately, to ensure text remains visible during webfont load in WordPress takes a bit more work, depending on your configuration and the approach you choose. I’ll show you a few so you can pick your own.
Ensure Text Remains Visible During Webfont Load in WordPress: Hard Mode
Fair warning; if you’re going to follow this part of the guide you’re going to have to get your hands dirty and depending on your configuration, it might take you a few hours. Let’s make a few things very clear…
- You’re familiar with CSS and a bit of PHP (specifically WordPress’ framework),
- You have an IDE (e.g. PHPStorm or Visual Studio Code) installed and a local WordPress development environment ready to go, or
- You have SSH access to a staging environment replicating your production site,
- You’re aware of the fact that this tutorial is to show you a global approach and it might not fit your needs 100%,
- You’ve (temporarily) disabled any CSS optimization plugins, because that’ll ease the search.
Seriously, if anything I just said confused you or has you gasping for air; just scroll down for the — much! — easier alternative.
In this tutorial I will be using a real world example, which I’ve seen often while optimizing a site or in support tickets.
Hunting for Stylesheets
A very popular page builder, called Elementor, comes bundled with a bunch of libraries that add webfonts to your WordPress website. One of these webfonts is called eicons.