Display fallback fonts

When 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 of this, saying, "Ensure text remains visible during webfont load".

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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.