Fonts are often large files that take awhile to load. 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:
See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.
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.
font-display: swap in your
you can avoid FOIT in most modern browsers:
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
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.)
It's worth mentioning that not all major browsers support
so you may need to do a bit more work to fix the invisible text problem.
See the Avoid flash of invisible text codelab
to learn how to avoid FOIT across all browsers.