Text invisible while the font loads

perf/font-displaywarningperformancelighthouse

Why it matters

font-display: block (or auto, or no font-display in @font-face) hides text for up to 3s while the web font downloads (Lighthouse: "Ensure text remains visible during webfont load").

Fix

font-display: swap (or optional for body text); in next/font, keep the default display: "swap".

Credit

  • From Google Chrome

    Lighthouse flags web fonts that keep text invisible during loading and recommends font-display: swap.

References

See it

Load fonts without shift