Fonts are often large files with slow load times. Some browsers hide text until the font loads, causing a flash of invisible text (FOIT).
How the Lighthouse font-display audit fails
Lighthouse flags any font URLs that may flash invisible text:
How to avoid showing invisible text
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,
you can avoid FOIT in most modern browsers:
@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;
}
The font-display API
specifies how a font is displayed.
swap
tells the browser that text using the font should be displayed immediately using a system font.
Once the custom font is ready, it replaces the system font.
(See the Avoid invisible text during loading post
for more information.)
Preload web fonts
Use <link rel="preload" as="font">
to fetch your font files earlier. Learn more:
- Preload web fonts to improve loading speed (codelab)
- Prevent layout shifting and flashes of invisibile text (FOIT) by preloading optional fonts
Google Fonts
Add the &display=swap
parameter to the end of your Google Fonts URL:
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
Browser support
Stack-specific guidance
Drupal
Specify @font-display
when defining custom fonts in your theme.
Magento
Specify @font-display
when defining custom fonts.