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’s pagespeed 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 site) and increase your pagespeed’s score by removing this error.

Why 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 “Ensure text remains visible during webfont load” error, and upon clicking on the error, it will show the complete URLs of font files.

ensure text remains visible during webfont load error, how to fix ensure text remains visible during webfont load error

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 upon it, it will show the complete URLs of Google Font files.

Why it shows 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, it immediately applies 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 easy.

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 “ensure text remains visible during webfont load” error in pagespeed 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 pagespeed 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 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 how it looks;

ensure text remains visible during webfont load error, how to fix ensure text remains visible during webfont load error

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 “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 WordPress library, which is available for free.

If you’re not using the “Asset CleanUp” plugin on your WordPress, then I would recommend it for improving your website speed. Even I’m using the free plugin of Asset CleanUp to optimize the speed of my website, and it works well.

 

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.

ensure text remains visible during webfont load error, how to fix ensure text remains visible during webfont load error

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

ensure text remains visible during webfont load error, how to fix ensure text remains visible during webfont load error

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.

You can also enable the “Preconnect” resource, It will instruct the browser to preconnect to Google Fonts while it is loading the CSS and it saves loading time.

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 Plugins stylesheets.

 

To solve this issue using Asset CleanUp Pro, 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.

ensure text remains visible during webfont load error, how to fix ensure text remains visible during webfont load error

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

ensure text remains visible during webfont load error, how to fix ensure text remains visible during webfont load error

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 pagespeed insight.

Page loading time and page speed are important factors to serve 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.

1 thought on “How to Fix “Ensure text remains visible during webfont load” Error in PageSpeed”

Your email address will not be published. Required fields are marked with *.

Leave a Comment

9 Shares
Share via
Copy link
Powered by Social Snap