Articles on: Features

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.

Updated on: 23/06/2023

Was this article helpful?

Share your feedback


Thank you!