Avoid invisible text during font loading
Why should you care?
Fonts are often large files that take awhile to load. To deal with this, some browsers hide text until the font loads (the "flash of invisible text"). If you're optimizing for performance, you'll want to avoid the "flash of invisible text" and show content to users immediately using a system font (the "flash of unstyled text").
Display text immediately
This guide outlines two ways to achieve this: the first approach is very simple but does not have universal browser support; the second approach is more work but has full browser support. The best choice for you is the one that you'll actually implement and maintain.
Option #1: Use font-display
is an API for specifying 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.
If a browser does not support
font-display, the browser continues to follow
it's default behavior for loading fonts. Check which browsers support
These are the default font-loading behaviors for common browsers:
|Browser||Default behavior if font is not ready…|
|Microsoft Edge||Uses a system font until font is ready. Swaps out font.|
|Chrome||Will hide text for up to 3 seconds. If text is still not ready, uses a system font until font is ready. Swaps out font.|
|Firefox||Will hide text for up to 3 seconds. If text is still not ready, uses a system font until font is ready. Swaps out font.|
|Safari||Hides text until font is ready.|
Option #2: Wait to use custom fonts until they are loaded
There are three parts to this approach:
- Don't use a custom font on initial page load. This ensures that the browser displays text immediately using a system font.
- Update page styling to use the custom font.
Here are the changes you can expect to make in order to implement this:
- Refactor your CSS to not use a custom font on initial page load.
- Add a script to your page. This script detects when the custom font is loaded and then will update the page styling.
Run Lighthouse to verify the site is using
font-display: swap to display
- Navigate to the Audits panel in DevTools.
- Select the Performance checkbox.
- Click Run Audits to generate a report.
Confirm this audit is passing: "Ensure text remains visible during webfont load".
See it in action
Learn more and put this guide into action: