Lighthouse: Ensure text remains visible during webfont load
When your browser is loading your page, text content may be ready for painting before your webfonts have fully downloaded. In these situations, your text remains invisible or hidden from the user for a brief period until your webfont has downloaded. This issue is known as the Flash of Invisible Text (FOIT).
Ensuring your text remains visible as the webfont 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 webfont loads affect page performance?
For pages with text that use webfonts, the browser cannot render said text until the webfont is ready.
In many cases, the text is usually ready before the webfont has loaded. The browser pre-emptively creates the space for the text even though the webfont 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 webfont.
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 webfonts declared in the CSS and checks to see if a
font-display attribute has been specified for each webfont with either of the following values:
If GTmetrix finds even one webfont URL without the above declarations, this audit triggers. Clicking the audit reveals the list of webfont URLs.
How to ensure text remains visible during webfont load?
There are a few strategies to ensure text on your page remains visible during the webfont load, such as:
1) Preloading webfonts
You can preload webfonts 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 webfont you are loading.
- format refers to the particular webfont 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 webfont display strategy, which is defined by the user agent.
- block - tells the browser to hide the text using an invisible placeholder until the webfont has loaded, and then swap it with the chosen webfont.
- swap - tells the browser to immediately render the text using a fallback font until the webfont has loaded, and then swap it with the chosen webfont.
- fallback - tells the browser to briefly hide the text, then render the text using a fallback font until the webfont has loaded, and finally swap it with the chosen webfont.
- optional - works in a similar manner to fallback but gives the browser the freedom to decide whether the chosen webfont should be used at all.
For most modern browsers, using
font-display: swap solves the FOIT issue.
3) For Google webfonts
If you are using Google webfonts on your page, you can add
font-display functionality by adding the
&display=swap parameter at the end of your webfont URL in your CSS.
<link href="googlewebfonturl&display=swap" rel="stylesheet">
where googlewebfonturl is the URL of your chosen Google webfont.