Custom typography is key to brand identity, but improper font loading can block page rendering or cause visual layout shifts (CLS), hurting your site's performance and Core Web Vitals scores.
1. Web Font Best Practices
- Use WOFF2: WOFF2 is the standard compressed font format for modern browsers, offering up to 50% file size savings compared to legacy formats.
- Preload Critical Fonts: Use
rel="preload"to tell the browser to download critical fonts early in the loading process, reducing render blocking.
<!-- Preloading critical font asset -->
<link rel="preload" href="/fonts/outfit.woff2" as="font" type="font/woff2" crossorigin>
2. Prevent Layout Shifts (FOIT vs FOUT)
Set font-display: swap in your @font-face declarations to display a fallback font immediately while the custom font loads. This prevents Flash of Invisible Text (FOIT) errors, ensuring users can read standard text templates immediately while custom styles load, reducing overall CLS layout shifts.