New: Cookbooks and AI ExplanationsStep-by-Step recipes to solve problems connected to Roadmaps and Cheat Sheets. Need more details? Use AI buttons for structured and simple explanations with concrete examples throughout the whole platform.Take a look
The moment my custom font finishes loading, the heading jumps and pushes the paragraph below it down.
What you'll have at the end
A fallback font tuned to match your real font's size, with the font-caused shift gone from the page's own trace.
You need
A heading styled with a custom web font declared through @font-face, backed by a fallback font in the same stack, on a page you can reload with developer tools open.
Not covered
Deciding whether to use font-display: swap, optional, or another display strategy at all; this recipe assumes a fallback is already showing first and fixes the size mismatch that swap exposes, not the choice of display strategy itself.
Leans on
Stop an unsized image from shoving the page down
when your watcher points at an image instead of the heading, this is the recipe for that specific shift
Wire web-vitals into your own analytics
once your own reload confirms the fix, wire up field measurement to see whether real visitors' scores actually improved
Checked 25 Aug 2026
Part of the Core Web Vitals and Performance Metrics cookbook