How do you make web fonts load fast without hurting LCP or CLS?

Load fewer and smaller font files, start them early, and make the fallback font look like the real one.

Fewer and smaller files:

• Use only WOFF2. It is the most compressed font format, and every modern browser supports it.
• Use fewer weights and styles. A variable font holds every weight in one file, which helps if you need many.
• Subset the font: remove the characters you never use. For example, keep only Latin if the page is only in English. With unicode-range in @font-face, the browser downloads a file only when the page uses those characters.

Start them early:

• Self-host fonts on your own domain. A font CDN on another domain needs an extra connection first.
• Preload only the one or two fonts used above the fold: <link rel="preload" as="font" type="font/woff2" crossorigin>. The crossorigin attribute is needed even on your own domain, because fonts are always fetched in CORS mode.

Protect LCP and CLS:

• Use font-display: swap or optional, so text is never hidden for long. LCP (Largest Contentful Paint) is often a text block, and invisible text delays it.
• Tune the fallback font with size-adjust, ascent-override and descent-override, so the swap doesn't move the layout. Tools like next/font do this for you.