Skip to main content

font-display: swap vs optional

font-display: swap shows fallback text immediately, swaps to the web font when ready. The cost is a visible swap on slow connections.font-display: optional gives the browser 100ms …

March 16, 2026 Performance chris 1 min read Accessibility

Article takeaway

font-display: swap shows fallback text immediately, swaps to the web font when ready. The cost is a visible swap on slow connections.font-display: optional gives the browser 100ms …

font-display: swap shows fallback text immediately, swaps to the web font when ready. The cost is a visible swap on slow connections.

font-display: optional gives the browser 100ms to fetch the font; if it does not arrive, the page sticks with the fallback for that session.

For CLS-critical pages, optional eliminates the swap. Pair with size-adjust on the @font-face to match the fallback metrics.

Share X / Twitter LinkedIn

Leave a comment

Related Posts