If you ran your website through PageSpeed Insights, you may see a recommendation to ensure text remains visible during webfont load.
This is caused by FOIT (flash of invisible text) and happens when the browser waits for a font to download. A simple edit in your font’s CSS (or a plugin) can fix FOIT by using font-display: swap.
By applying font-display: swap, you’re telling the browser to use the fallback font until the custom font is ready (to prevent invisible text), then to “swap” to the fallback font with the custom font. So instead of being invisible, this ensures text remains visible during webfont load.
1. What Is FOIT (Flash Of Invisible Text)?
Flash of invisible text happens when the browser hides the text until the font loads.
Fonts can load slowly because of their large file sizes. That’s why you might see the rest of the page download before your fonts, creating a flash of invisible text (shown in the image below).
The time your text is invisible is the “blocking period.” During the blocking period, you need to decide which font-display property to use. This determines how browsers will handle the fonts.
In the @font-face, you can choose between a few font-display options. Some cause more FOIT while others cause FOUT. The trick is to find a balance between the two, which is why “swap” is most often recommended. If you view your font’s CSS, it’s likely using one of the other options.
- FOIT – hide the text until fonts are ready (no fallback).
- FOUT – show the fallback font, then swap them when fonts are ready (FOUT).
Here is how browsers react:
2. How To Fix FOIT
View the problematic font file in your PageSpeed Insights report.
This article was written by Tom Dupuis and originally published on Tom Dupuis.