Fonts

The font-display property controls what happens while your web font is loading. Learn how font-display: swap prevents invisible text and the trade-off with layout shift.

Custom web fonts add visual identity but can delay text rendering and cause layout shift. Learn how font loading affects CLS and LCP and what loading strategies exist.

Loading multiple font families, weights, and styles multiplies the files your page must download before rendering text. Learn how font file count affects performance.

Variable fonts combine multiple weights and styles into a single file, reducing the number of font requests. Learn how variable fonts reduce page weight compared to loading separate font files.

Loading fonts from Google Fonts or other external services adds DNS lookups and connection overhead. Learn why self-hosting fonts can improve TTFB and LCP.