Web fonts significantly impact page load performance. Font loading can delay text rendering and cause layout shifts. Self-host fonts instead of relying on third-party CDNs. WOFF2 format offers best compression for modern browsers. Subset fonts to include only needed characters. font-display: swap renders fallback text immediately. Preload critical fonts with . Inline font declarations in critical CSS. Variable fonts reduce file count with adjustable weight/width. Font loading strategies affect Cumulative Layout Shift metric. Size-adjust property prevents fallback layout shift. Unicode-range subsetting loads only required scripts. Preconnect hints establish early connections to font origins. Font Face Observer enables JavaScript font loading control. Cache fonts aggressively with long max-age . FOIT (Flash of Invisible Text) vs FOUT (Flash of Unstyled Text). system-ui stack eliminates font downloads for system fonts. CSS font-display descriptor refines loading behavior. Google Fonts optimization with display=swap parameter. Performance budget includes font file sizes. Fast font loading improves perceived performance and Core Web Vitals.
