Lighthouse: Ensure text remains visible during webfont load

Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

Overview

When your browser is loading your page, text content may be ready for painting before your web fonts have fully downloaded. In these situations, your text remains invisible or hidden from the user for a brief period until your web font has downloaded. This issue is known as the Flash of Invisible Text (FOIT).

Ensuring your text remains visible as the web font loads, helps in preventing blank pages and unnecessary layout shifts for a better page experience.

How does your site score on this audit?

How do web font loads affect page performance?

For pages with text that use web fonts, the browser cannot render said text until the web font is ready.

In many cases, the text is usually ready before the web font has loaded. The browser pre-emptively creates the space for the text even though the web font isn't available, thus resulting in the Flash of Invisible Text issue.

The Flash of Invisible Text (FOIT) issue makes your page visually jarring to visitors.
FOIT highlighted text example
Text has loaded and can be highlighted; however, remains invisible as the font has not loaded yet to style it.

Preloading web fonts and using font-display can help overcome this issue by displaying text with system or fallback fonts until the browser can render the content with the requested web font.

This helps prevent unnecessary layout shifts for a fast and (according to Google) 'delightful' page experience.

Flash of Unstyled Text (FOUT)

The Flash of Unstyled Text (FOUT) is a similar issue to FOIT, and is also caused by fonts failing to load in time.

The Flash of Unstyled Text (FOUT) is a similar issue resulting from fonts failing to load in time, however the visitor is still able to read the text during load.

However, your page visitors can still read the text during the page load, as the closest available font is used to display the text.

Note that FOUT's impact on web performance is less pronounced compared to FOIT.

How does GTmetrix trigger this audit?

GTmetrix identifies all the web fonts declared in the CSS and checks to see if a font-display attribute has been specified for each web font with either of the following values:

  • block
  • swap
  • fallback
  • optional

If GTmetrix finds even one web font URL without the above declarations, this audit triggers. Clicking the audit reveals the list of web font URLs.

How to ensure text remains visible during web font load?

There are a few strategies to ensure text on your page remains visible during the web font load, such as:

1) Preloading web fonts

You can preload web fonts that are immediately needed during page load by adding the following link tag to your HTML header:

<link rel="preload" href="/webfontname" as="font" type="font/format" crossorigin>

where

  • "/webfontname" is the name of the web font you are loading.
  • format refers to the particular web font format (i.e., ttf, woff, woff2, etc.).

2) Using font-display

The font-display attribute determines how the font is displayed during your page load, based on whether it has been downloaded and is ready for use. It takes the following values:

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

where

  • auto - tells the browser to use its default web font display strategy, which is defined by the user agent.
  • block - tells the browser to hide the text using an invisible placeholder until the web font has loaded, and then swap it with the chosen web font.
  • swap - tells the browser to immediately render the text using a fallback font until the web font has loaded, and then swap it with the chosen web font.
  • fallback - tells the browser to briefly hide the text, then render the text using a fallback font until the web font has loaded, and finally swap it with the chosen web font.
  • optional - works in a similar manner to fallback but gives the browser the freedom to decide whether the chosen web font should be used at all.

For most modern browsers, using font-display: swap solves the FOIT issue.

Click here to learn more about font-display and its browser compatibility.

3) For Google web fonts

If you are using Google web fonts on your page, there are a few quick optimizations you can do:

Adding font-display functionality

You can quickly add font-display functionality by adding the &display=swap parameter at the end of your Google web font URL in your CSS.

For example,

<link href="googlewebfonturl&display=swap" rel="stylesheet">

where googlewebfonturl is the URL of your chosen Google web font.

Optimizing font files in certain scenarios

Sometimes, you may know in advance which letters you'll be applying certain Google web fonts to on your page. E.g., logos or headings.

In this case, you can add the text= parameter to your Google Font API request to get an optimized font file from Google.

For example,

https://fonts.googleapis.com/css?family=Roboto&text=Heading

4) For WordPress (or other CMS) Users

WordPress users can use certain plugins to fix the FOIT issue. For example, WP Rocket automatically applies the font-display: swap attribute to web fonts.

You can also preload fonts easily by enabling the option in the Preload settings. Read our detailed WordPress optimization using WP Rocket guide to know how to do this.

Summary

2.9.0
 ***

Using WordPress? Improve this Audit with WP Rocket

WP Rocket can preload fonts and optimize Google Fonts to help ensure text remains visible during your page load.

Get full page caching for your WordPress website (and more) to speed up overall loading times.


Get WP Rocket »

Cookie Policy

By clicking "Allow All" you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View cookie details

Deny Allow All
×