Docs / Font / Display Fallback Fonts

Display Fallback Fonts

When you're using external fonts (like Google Fonts), your browser won't display text until those fonts are ready. This creates an effect called Flash of Invisible Text or FOIT.

Google PageSpeed Insights also warns this saying "Ensure text remains visible during webfont load".

We can tell the browser to display a fallback font (defaults to system font) until fonts are ready. This works by adding font-display: swap to the CSS @font-face rule.