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.
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
Thank you!