A font-loading checklist that fixes 3 metrics

A font-loading checklist that fixes 3 metrics
Web fonts touch LCP (text), CLS (swap reflow), and FCP. One sequence handles all three.

— Step 1: Self-host woff2; drop Google Fonts' extra connection (saves ~150ms connect).
— Step 2: Preload only the woff2 you use above the fold: .
— Step 3: font-display:swap to paint text immediately (helps LCP-text).
— Step 4: Add size-adjust + ascent-override on a fallback @font-face to kill the swap shift (CLS).
— Step 5: Subset to used glyphs — a Latin subset is often 18KB vs 110KB.

Before | After: LCP-text 2.2s -> 1.4s, CLS 0.08 -> 0.01.

Takeaway: a subset, self-hosted woff2 should weigh under 25KB above the fold.