What is 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".

Image source: malthemilthers.com.

We can tell the browser to display a fallback font (default font in the system) until fonts are ready. This works by adding `font-display: swap` inside the corresponding CSS rule of the font.