Fonts are often large files that take awhile to load. Some browsers hide text until the font loads causing the "flash of invisible text". You need to ensure that text remains visible during webfont loads. Lighthouse reports in the Diagnostics section any font URLs that may flash invisible text:
Easiest way to avoid showing invisible text
The easiest way to avoid showing invisible text while custom fonts load,
is to show a system font while waiting.
font-display: swap in your
you can fix this problem 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 the font display strategy.
swap tells the browser that text using this font should be displayed immediately using a system font.
Once the custom font is ready, the system font is swapped out
(see Avoid invisible text during loading).
It's worth mentiong that not all major browsers support
so you may need to do a bit more work to fix the invisible text problem.
Follow the Avoid flast of invisible text codelab
to learn how to avoid this invisible text across all browsers.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.