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

1. Overview

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. Web Fonts must be downloaded before they can be used, as a result. The text on a webpage is momentarily obscured when a web font is being downloaded till the web font is loaded.

2. How to Identify ‘Ensure Text Remains Visible During Web Font Load’?

Tools like GT matrix,lighthouse,Page speed insights
Ensure-text-remains-visible-during-webfont-load-mobile
The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style.

3. What Are Web Fonts?

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 web font 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 web fonts 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. 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.

4. 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.

5. How to Fix Ensure Text Remains Visible During Webfont Load

Css Property:- font-display: swap;

Example:

Before

@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-6H 6MmBp0u-.woff2) format(‘woff2’);
}

After


@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-6H 6MmBp0u-.woff2) format('woff2');
font-display: swap;
}

6. Google Fonts

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.

Example:

Before

< link href =”https://fonts.googleapis.com/css?family=Roboto:400,700″rel=”stylesheet” >

After

< link href =”https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap”rel=”stylesheet” >

7. Preload For Web Fonts

By adding the following link tag to your HTML header, you may preload web fonts that are instantly required during page load

Example:

Where,

The name of the web font you are fetching is “/webfontname”The term format refers to the specific web font format (i.e., ttf, woff, woff2, etc.).

8. Conclusion

Using style fonts previously came with the trade-off of a lower PageSpeed score and weaker user experience but with font-display and preloading, you can apply them to your page in a speedy way that isn’t obvious to most users.