Ensure Text Remains Visible During Webfont Load WordPress

Probably, you are reading this guide because you may have seen “ensure text remains visible during Webfont load WordPress” in the lighthouse, and you want to fix it.

Well, when you use webfont like Google font or font awesome, your visitor’s computer usually doesn’t have these. Therefore, they need to be downloaded first over the internet, which takes time. In contrast, fonts are usually large files that take a longer time to load.

Ensure Text Remains Visible During Webfont Load WordPress

In fact, until the font loads, some browsers hide the text, which causes a flash of invisible text (FOIT). That’s why Lighthouse flags this warning, and the best part is that fixing this issue takes nearly a few minutes. I’ll let you know every bit of it in this guide, so, without delaying more, let’s dive into it.

Ensure Text Remains Visible During Webfont Load WordPress

Ensure Text Remains Visible During Webfont Load WordPress issue fix

Once testing your site on Lighthouse, you may have found an issue called “ensure text remains visible during Webfont load WordPress” like the following image-

By fixing this issue, you can save some milliseconds of loading time. Fortunately, there are some easy ways to avoid showing invisible text while loading. So, let’s start fixing-

Include font-display: swap

The font-display API is a CSS descriptor that implies how your font is displayed while loading. On the other side, swap tells the browser to display the text using the font immediately using a system font. The temporary system font will be swapped out once the custom is ready.

font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

As you can see in the image, that there are several font display values. Each value commands different things to Google. For example-

  • Auto instructs Google to use the default web font display strategy, which the user agent defines.
  • Block tells Google to hide the text until the web font has been downloaded by using an invisible placeholder.
  • Swap tells browsers to immediately render the text until the Web fonts are loaded by using the temporary font and then swap with the custom font.
  • Fallback commands the browser to hide the text briefly, then using a fallback font to render them until Web Fonts are loaded. Then, swap it with the chosen one.
  • Optional value is kind of similar to fallback. But, this value gives the browsers the freedom of deciding whether the chosen Webfont should be used or not.

But, you should always use the swap value to avoid FOIT and let the text appear as fast as possible on the screen. Including font-display: swap in your @dont-face style, is the easiest way to avoid FOIT.

@font-face {
 font-family: 'Pacifico';
 font-style: normal;
 font-weight: 400;
 src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
 font-display: swap;
}

Preload Web Fonts

In order to avoid FOIT, you can use <link rel=“preload” as=”font”> to fetch your font files earlier.

<link rel='preload' href='/font.woff2' as='font' crossorigin>

Google Fonts

If you are using Google fonts, simply add &display=swap at the end of Google Fonts URL.

For standard-

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

For @import

<style>
 @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
 </style>

Fixing local Web Fonts

With the @font-face, I mean local web fonts, which are located in your server; you can use the following-

@font-face {
  font-family: "Open Sans Regular";
  font-weight: 400;
  font-style: normal;
  src: url("fonts/OpenSans-Regular.woff2") format("woff2");
  font-display: swap;
}

Plugins to Fix FOIT

You can also use this WordPress plugin called  Swap Google Fonts Display to ensure your site text remains visible during Web font load. Simply install and activate it.

Run A Speed Test

Again, run a speed test in Lighthouse or Google PageSpeed insights. Make sure it shows all text remains visible during Webfont loads and the “ensure text remains visible during Webfont load WordPress” warning goes out.

Conclusion

Page loading time and after speed are important factors when it comes to providing a great user experience. With a great user experience, your site will get increased traffic, conversions, sales, and decreased bounce rates.

The best thing is, this easy fix can lead your site to offer a great user experience, especially for mobile users. So, focus on implementing the above best practices to your site to ensure text remains visible during Webfont load.

Drop a comment below if you like this guide or you’ve any queries. If you need any assistance in fixing the issue or want to optimize your website speed, feel free to Contact Us. We will definitely help you to fix the issue.

Leave a Comment