Optimize web font loading

Slow font loading can cause 'Flash of Invisible Text' (FOIT) or significant layout shifts, negatively impacting both user experience and Core Web Vitals.

Quick Reference

• Use font-display: swap to prevent invisible text during load
• Preload critical fonts to discover them earlier
• Use modern formats like WOFF2 for better compression

Check

Check font loading strategies and verify that font-display is used and critical fonts are preloaded.

Fix

Add font-display: swap to @font-face declarations and use <link rel='preload'> for the most important fonts.

Explain