How to Fix “Ensure Text Remains Visible During Webfont Load” Error in PageSpeed

Are you getting the “Ensure text remains visible during Webfont load” error while checking your Google page speed insight and don’t know how to solve this issue? Generally, I know how to solve this issue on a custom PHP or HTML-based website, but when it comes to WordPress, I have struggled as well.

So here in this guide, we will talk about how we can solve this issue in WordPress (I’ll also share the steps to fix this issue in custom PHP & HTML-based sites) and increase your page speed score by removing this error.

Why does it Show “Ensure text remains visible during Webfont load” Error in PageSpeed

Upon testing your website on Google’s PageSpeed Insight, you may have seen an issue of the “Ensure text remains visible during Webfont load” error, and upon clicking on the error, it will show the complete URLs of font files.

As you can see in the image above, I’m also getting the “ensure text remains visible during Webfont load” error on this website, and when I click on it, it will show the complete URLs of Google Font files.

Why does it show an error?

When a website loads in the browser and detects any custom font file applied to a text, it waits till the font is downloaded, and until that time, the text is invisible. Once the custom font files are downloaded, they immediately apply to the website, and this is known as the flash of invisible text.

How to Fix Flash of Invisible Text?

Fixing the flash of invisible text can also fix the “ensure text remains visible during Webfont load” error on your website, and fixing this issue is a lot easier.

You can easily fix this issue by adding

font-display: swap;

code in your current

@font-face {

}

CSS property.

But what is @font-face?

A @font-face is a simple CSS rule through which you can apply a custom font to a text.  It has extensions like woff2, woff, ttf, etc. For example, a @font-face code will look like this:

@font-face {

font-family: Roboto,sans-serif;

font-display: swap; // ---> It will fix this issue.

font-style: normal;

font-weight: 400;

src: url(Roboto.woff2);

}

Now we apply this font in a paragraph using;

p {

font-family: Roboto, sans-serif;

font-size: 18px;

}

When a website loads, it indicates that the paragraph tag has a “Roboto” font applied, and it instantly starts downloading the font used in a paragraph tag. Until it downloads the font, the text remains invisible.

This is why it shows the “ensure text remains visible during webfont load” error in page speed and adding font-display: swap; in your current @font-face CSS can solve this issue.

How to Fix This Issue in WordPress

If you’re using WordPress and it shows this error in page speed insight, then you can easily solve this issue using simple steps. I’ve shared the steps to resolve this error on both local fonts and Google fonts.

Solution for Google Fonts

Initially, Google Fonts won’t add the font-display: swap; rule to their font, but now they support a new query parameter to apply the font-display: swap by adding the &display=swap parameter at the end of the Google font file.

Here is how it looks;

If you’re a theme developer or you know how to edit theme files in WordPress, then you can easily add the &display=swap parameter in your Google font file.

But if you’re not comfortable with editing the WordPress theme files, you can still use various plugins like Asset CleanUp to add this parameter and resolve the “ensure text remains visible during Webfont load” issue.

How to Solve this Issue Using the “Asset CleanUp” Plugin

To apply the display=swap parameter in your Google Fonts file, you have to download and install the Asset CleanUp plugin from the WordPress library, which is available for free.

Once you’ve downloaded and activated the plugin, click on the “Asset CleanUp” option in your WordPress admin panel > and then click on the “Settings” under “Asset Cleanup” to open the optimization page.

Once you’re on the settings page, click on the “Google Fonts” option. When you click on the Google Fonts option, it will further open the settings from where you can easily manage various settings to optimize google font files.

Some of these settings can include;

• Combine Multiple Requests Into Fewer Ones
• Apply font-display: CSS Property Value
• Preconnect & Preload Google Font Files

Once you’re on Google font files settings, on the “Apply font-display: CSS property value” settings and change it from “Do not apply (default)” to “swap (most used)” and it will add the &display=swap parameter to all of your google font files.

Solution for Theme & Plugin Fonts

Most of the time, your WordPress theme or plugin loads other fonts like font-awesome or icon fonts, and it also shows the same issue in Google PageSpeed Insight.

This is also an easy fix, but it requires a little bit of WordPress editing knowledge. If you’re not comfortable with editing the codes, you can also use the premium version of the “Asset CleanUp Pro” plugin to automatically add the font-display: swap; CSS property in your WordPress Theme or plugin stylesheets.

To solve this issue using Asset CleanUp Pro, click on the “Asset CleanUp” option in your WordPress admin panel > and then click on “Settings” under “Asset Cleanup” to open the optimization page.

Once you’re on the “Asset CleanUp” > “Settings” page, click on the “Local Fonts” option to open the customization settings for Local Fonts.

Once the “Local Fonts” customization settings have been opened in your browser, select “swap (most used)” from the given selection option under the “Apply font-display: CSS property value” to automatically add font-display: swap; in all of your stylesheets.

Wrapping Up

In this guide, we’ve tried our best to explain how you could fix the “ensure text remains visible during webfont load” or “flash of invisible text” issue on page speed insight.

Page loading time and page speed are important factors in serving good user experiences, and fixing this issue can provide a much better user experience. And a page shall not be considered loaded unless it is showing every single thing over it.

So, you must reduce the content loading time on the page so that the pages do not timeout, and the users can get the balance, speed, and stability they want. If you’re also suffering from slow website speed, then you can check our post on website speed optimization to optimize it correctly.