Guide To Fix “Ensure Text Remains Visible During Webfont Load”

While checking your page load speed running Lighthouse, you may have seen several errors or warnings. “Ensure text remains visible during Webfont load” is one of them. Often, large fonts take a while to load when a browser is loading your page. At this time, the text remains hidden or invisible on your visitor’s device until the Webfont has been downloaded.

As a result, the page takes a lot of time to load. That is why Google shows this warning that indicates your page load speed is slow, and you have to fix it. Fixing this issue requires nearly a few minutes. This guide will show you the steps for how to Fix “Ensure text remains visible during Webfont load”.     

How do Webfonts Load or Work in Browser?

Before jumping out to fix this error, let’s find out how Webfonts work in browsers. Before the invention of Web Fonts, web developers had to use some pre-installed fonts. Webfonts come up with the freedom of using any type of font on the website. Along with this advantage, they have their own disadvantages also.

When browsers identify that a custom font is applied to a text, they wait until that font is downloaded. Until the download process is completed, all the texts will be invisible. Once the downloading process is complete, that custom font will be immediately applied. This process is known as Flash of Invisible Text (FOIT). 

If the browser fails to download the font within 3 seconds, it will swap the fonts for a default fallback font. This fallback font remains until the Webfont fully loads, and this is called Flash of Unstyled Text (FOUT)

How to Fix “Ensure Text Remains Visible During Webfont Load”?

There are several easiest ways to fix the “Ensure text remains visible during Webfont load” error. Let’s dive into the ways.

Ensure Text Remains Visible During Webfont Load

1. Font-display:swap

It is a CSS descriptor that you will find in all modern browsers. This descriptor determines how a font will be displayed based on when it was downloaded. There are different font-display values like-

font-display: auto;font-display: block;font-display: swap; font-display:fallback;font-display:optional;
  1. Auto instructs the browser to use the default web font display strategy which the user agent defines.
  2. Block tells browsers for hiding the text until the web font has been downloaded by using an invisible placeholder. After that, swap the texts with the chosen Webfonts.
  3. Swap command browsers to immediately render the text until the Webfonts loaded by using the fallback font and then swap with the chosen font.    
  4. Fallback tells the browser for hiding the text briefly, then using a fallback font to render them until Web Fonts are loaded. After that, swap it with the chosen one.
  5. 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.

You should use the swap value to avoid FOIT and let the text appear as fast as possible on the screen.

Using Google Fonts

While using Google fonts, you should use the font-display:swap method along with a simple “&display=swap” in the CSS or embed code.

Via standard-

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

Via @import-

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

If you are not interested in coding, then simply go for the WordPress plugin called Swap Google Fonts Display. This plugin will search for the Google fonts of your page and apply &display=swap to the URL. 

Using Local Fonts

Local fonts are way more faster than Google fonts. Even then they can cause slow page loading. So you can add font-display: swap to the @font-face rule. 

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

You may also use other fonts which are injected by plugins or themes like font-awesome or icon fonts. With this, the only way for fixing this is-

  • Go to the plugins then plugin editor and select the plugin that injects the font.
  • Find the CSS file that includes @font-face code and adds font-display: swap inside it. 
  • To find all files which contain “@font-face” you can use the String Locator plugin.

2. Fonts With a Class

The next way is to work with classes that are usually added to the body <body> or <html> element. This method works by indicating your stylesheet to render a page initially with a font. After that, load your Web Font via the FontFace API or preloading. After the font is loaded add a class to the page and it will make sure to activate Web Font for your page.

The advantage of using this process is you can gain more control over the fallback font. In addition, you can display the fallback font with different sizes and a larger line spacing to match the Webfont better.

Via the FontFace API

Using FontFace API is the first way to use fonts with a class. You should load the Web Font via JavaScript and once the font is loaded you can add a class.

<style>//fallback font met een .9rem font-size html{font-family: sans-serif;font-size:.9rem;   }//webfont font met een 1rem font-size html.fl{font-family: 'webfont';font-size:1rem;}</style>   <script> var font = new FontFace("webfont", "url(/font.woff2)",{style: 'normal', unicodeRange: 'U+000-5FF',weight:'400'});// don't wait for the render tree, initiate an immediate fetch! font.load().then(function(){document.fonts.add(font);document.documentElement.classList.add("fl")}); </script>  

You can also use the FontFace API method for switching all fonts at once while using multiple Web Fonts.

Via a Preload Link

The second way is preloading the Web Fonts that you will require immediately during page load. By adding the following links tag to the HTML header you can apply it. Once the preloading is done switch the class of the <html> element.

<link rel="preload"href="/webfont.woff2"as="font"type="font/woff2"crossorigin   onload="document.documentElement.classList.add('fl')"> <style> //fallback font met een .9rem font-size   html{font-family: sans-serif;font-size:.9rem;}//webfont font met een 1rem font-sizehtml.fl{font-family: 'webfont';font-size:1rem;} //fontface, wordt pas geactiveerd zodra de .fl class wordt toegevoegd aan de html tag   @font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;     src: url(/webfont.woff2) format("woff2");unicode-range:U+000-00FF;}</style>

3. Using Plugins

If you’re not comfortable with editing or coding, there are various plugins to help with this process. You can use,

Some Tips and Tricks

  • Use tools like Google PageSpeed insights to understand the page load speed.
  • Make sure to preload the visible fonts always. Otherwise, until a font is not used fonts won’t be downloaded by default.
  • Hosting Web Fonts is always faster than Web Fonts via external CDN or Google fonts.

Conclusion

A web page should be able to provide the best ever user experience. Google considers this as a ranking factor for web pages. So, you can ensure a better user experience by showing your content on the web page as fast as possible.

This guide shows the processes to fix “Ensure text remains visible during Webfont load”. So, start focusing on reducing the content loading time of your web page following this guide. In this way, your visitors will get the speed and stability which they want while visiting a page. 

Leave a Comment