How to fix ‘Ensure text remains visible during webfont load’

Date : 20 Aug 2021 | 6 min read

How to fix ‘Ensure text remains visible during webfont load’

1. QuickRead

If you recently evaluated your page load speed using Google’s PageSpeed Insights (PSI) tool, you may have received a nasty shock. A number of reasons contribute to sluggish page load times. The first is (Ensure text remains visible during webfont load). This issue occurs as a result of webfonts.
Webfonts are fonts that are not by default available for usage in web browsers. Webfonts must be downloaded before they can be used, as a result. The text on a webpage is momentarily obscured when a webfont is being downloaded till the webfont is loaded.
As a result, the website will appear to load much slower because it hasn’t “completed” loading for visitors to utilize. This might result in a poor user experience. When you do a Lighthouse study on your page, you will see the following warning concerning page load performance: “Ensure text remains visible throughout webfont load.”
This article will explain how to get rid of the ‘Ensure text remains visible during webfont load’ error.

2. What Are Webfonts?

Prior to the mid-1990s, there was no method to select the font that your website should be using.
When HTML’s font> tag was introduced in the mid-1990s, this situation improved slightly. You could select a font at the time, but it was only accessible to those who had the font installed on their machines. Browsers would display a default font, such as sans-serif if they did not have the font installed.
Internet Explorer enabled webfont downloads around the end of the 1990s. This meant that you didn’t have to have a specific font installed on your computer to view it. Since then, downloading webfonts has become routine for:
  • Desktop browsers such as Chrome, Firefox, Safari, and Opera.
  • Mobile browsers like Chrome, Firefox, and Opera for Android, as well as Safari on iOS.
So, to summarise this explanation. Webfonts are fonts that site owners can use and that their users can see even if they do not have it installed on their device. Webfonts are often large files that are not installed by default on a machine. Webfonts must thus be downloaded before they can be used.

3. How Webfonts Load

When a browser attempts to render a page, it examines the HTML and CSS stylesheets. It employs these to construct a render tree in order to present the page to the user in the required format.
The browser uses this information to determine page layout and how to “paint” the page. In this context, painting refers to the act of filling the page pixel by pixel.
When the browser detects that a page requires a webfont, it stops building the page in order to locate and download it. This is known as render blocking.
Render blocking obscures all text on the page. This period of invisibility is known as the Flash of Invisible Text (FOIT).
If the browser cannot download the webfont in less than 3 seconds, it will time out and replace it with a default fallback font. The fallback font will be used until the webfont is fully loaded. This is referred to as Flash of Unstyled Text (FOUT).
If the webfont loads in less than three seconds, the browser replaces the fallback with the required webfont. However, if the webfont download fails for any reason, the browser will continue to use the fallback font.
Search engines, such as Google, prefer that web pages deliver content as quickly as possible in order to provide a better visitor experience. Your site’s page load speed is critical!
To compensate for any lag in rendering a meaningful page, page load speed testing tools like Google’s PSI advise you to ensure text remains visible during webfont load.

4. Why is invisible text bad for page speed?

The invisible text has no effect on the final measured loading time of a page. So, what makes Lighthouse think it’s such a big deal?
Google believes that it is critical for a web page to provide the best possible user experience. The user experience can be enhanced by displaying content on the page as quickly as possible. Compare the two filmstrip versions of the site below:
Flash of Invisible Text
No flash of invisible text with display:swap
As you can see, the two pages completed loading at the same time. Nonetheless, the most recent version of the website appears to visitors to be much more appealing. Visitors can begin reading straight away.
That’s why it’s a good idea to display text in any case – not in the final font, but in a “fallback” font. This gives the impression to the user that your page actually does load quickly.

5. How to Make Text Visible During Webfont Load

There are a few techniques you may use to guarantee that the text on your page remains visible while the web font loads, such as:

Using font-display

The font-display attribute controls how the font is shown during page load, based on whether it has been downloaded and is ready to use. It accepts the following values:
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
where,
auto – instructs the browser to use its default web font display approach, as determined by the user agent.
block – instructs the browser to hide the text with an invisible placeholder until the web font is loaded, then swap it with the selected web font.
swap – instructs the browser to render the text using a fallback font until the web font is loaded, then swap it with the selected web font.
fallback – instructs the browser to temporarily conceal the text, then render it with a fallback font until the web font has loaded, and then swap it with the selected web font.
optional – functions in the same way as fallback, but allows the browser to determine whether the selected web font should be used at all.

<div class=”content”>Using <code>font-display</code>: swap addresses the FOIT problem in most modern browsers.</div>
<div class=”content”>The simplest approach to avoid displaying invisible text while custom fonts load is to display a system font momentarily. You can avoid FOIT in most current browsers by putting <code>font-display: swap</code> in your <code>@font-face style:</code></div>
<div class=”content code”>@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;
}</div>

<div class=”content”>

The font-display API defines how a font should be presented. The swap command instructs the browser to display text using the font immediately using a system font. When the custom font is finished, it takes the place of the system font.

Preloading web fonts

By adding the following link tag to your HTML header, you may preload web fonts that are instantly required during page load:
<link rel=”preload” href=”/webfontname” as=”font” type=”font/format” crossorigin>
where,
The name of the web font you’re fetching is "/webfontname."
The term format refers to the specific web font format (i.e., ttf, woff, woff2, etc.).

For Google web fonts

If you use Google web fonts on your page, you may enable font-display functionality by using the &display=swap argument at the end of your web font URL in your CSS.
As an example,
<link href=”googlewebfonturl&display=swap” rel=”stylesheet”>
where googlewebfonturl is the URL of the Google web font you want to use.

<h2>6. Summary</h2>
<div class=”content”>Using attractive fonts used to come at the expense of a lower PageSpeed score and a poor user experience, but with <code>font-display</code> and preloading, you can apply them to your website in a seamless way that most visitors won’t notice.</div>
<div class=”content”>Regardless, we recommend that you limit the usage of web fonts to headers and restrict FOIT and FOUT to a smaller portion of the page. Furthermore, readability should take precedence over style. Typography and fonts existed in print form before computers, and the system fonts we have now are digital copies of what has worked for over 100 years, so readers are acquainted with them.</div>

Aug 20th, 2021|
This website or its third party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the privacy policy . By tapping on "I accept" you agree to the use of cookies.