font-display: swap vs optional: CLS vs FOUT tradeoff

font-display: swap vs optional: CLS vs FOUT tradeoff
Both fight invisible text. They trade layout shift against a flash.
—
swap: shows fallback immediately, swaps to webfont whenever it loads. No invisible text, but a reflow -> CLS if metrics differ.
—
optional: uses webfont only if it loads in ~100ms, else sticks with fallback for the whole page. Near-zero CLS, but webfont may not show first paint.
—
Measured: swap caused CLS 0.04 from a metric-mismatched font; optional held CLS at 0.00.
Pair either with size-adjust to match fallback metrics.
Takeaway: optional buys CLS 0.00; swap risks ~0.05 without size-adjust.