@shipitandpray/pretext-ssr

Zero-CLS font loading via predictive height reservation

CLS: 0.000 SSR-ready Next.js MIT

Without pretext-ssr

CLS: 0.000
no min-height

The Quick Brown Fox Jumps Over the Lazy Dog

no min-height

When a web font loads and replaces the fallback system font, text reflows because the two fonts have different character widths. Lines break at different points, paragraphs change height, and everything below shifts. This is Cumulative Layout Shift (CLS) and it hurts your Core Web Vitals score.

^

Content below the text blocks shifts when font swaps

With pretext-ssr

CLS: 0.000
min-height: 48px

The Quick Brown Fox Jumps Over the Lazy Dog

min-height: 144px

When a web font loads and replaces the fallback system font, text reflows because the two fonts have different character widths. Lines break at different points, paragraphs change height, and everything below shifts. This is Cumulative Layout Shift (CLS) and it hurts your Core Web Vitals score.

^

Content below stays perfectly still. Zero CLS.

How It Works

1
SSR
Measure text height for BOTH fonts
→
2
Reserve
Set min-height = max(fallback, web)
→
3
Swap
Font loads, text reflows WITHIN reserved space
→
4
Cleanup
Remove min-height after font loads
  1. Dual-font prediction. On the server, pretext-ssr measures every text block with both the fallback font metrics AND the web font metrics. It uses character widths to predict line breaks and compute the exact rendered height for each font.
  2. Max height reservation. The min-height is set to the larger of the two predicted heights. This guarantees that no matter which font is currently rendering, the container is tall enough to hold the text without overflow.
  3. Zero CLS font swap. When the web font loads and text reflows (different line breaks, different paragraph height), the text stays within the reserved space. The container height does not change. No layout shift occurs.
  4. Clean removal. After the web font is confirmed loaded via the Font Loading API, the min-height is smoothly transitioned to auto, preventing permanently oversized containers.