Lighthouse: Ensure text remains visible during webfont load
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.
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.
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:
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>
- "/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.).
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;
- 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.
3) For Google web fonts
If you are using Google web fonts on your page, you can add
font-display functionality by adding the
&display=swap parameter at the end of your web font URL in your CSS.
<link href="googlewebfonturl&display=swap" rel="stylesheet">
where googlewebfonturl is the URL of your chosen Google web font.