Fix cumulative layout shift from web fonts and hero images

A landing page can look stable in a screenshot and still jump on a phone. A custom font arrives after the fallback, changing line breaks. A hero image loads without reserved space and pushes the headline or button down. Both can raise cumulative layout shift (CLS), and both can make the first view feel broken.

The useful stack is straightforward: use PageWisr to find page-level issues, a browser’s developer tools to reproduce and trace the movement, then make the smallest code change that reserves space or stabilizes text. Do not treat a CLS score as a diagnosis. It tells you movement happened, not which resource caused it.

Start with the page people actually see

Run a PageWisr scan on the landing page before editing. Its scan renders the page in a real browser on desktop and phone, and measures items including layout shift. Its findings are tied to specific page elements, with a crop of the page, and recommendations include a fix prompt. Use those details to identify where to investigate; do not assume the largest visible shift is automatically the only problem.

Next, reproduce the first visit in a mobile-sized browser with the cache disabled. Record a performance trace or watch the page as it loads. Look for a headline that reflows when the custom font appears, or content that moves when the hero image takes up space. Check whether the movement happens on a repeat visit too. A warm cache can hide a cold-load problem.

Keep the test controlled. Use the same viewport and page state before and after a change. If a consent prompt also covers or displaces the first view, separate that behavior from font and image shifts; the earlier mobile hero and cookie-banner diagnosis covers that related source of interference.

Reserve the hero’s space before its image arrives

When an image has no known dimensions, the browser may lay out the page before it knows how much room the image needs. Once the file loads, the page moves. Give the image intrinsic width and height attributes that match its actual aspect ratio, or reserve the intended space with CSS aspect-ratio. For a cropped hero, set the container’s ratio and use object-fit: cover where appropriate.

Check responsive variants, too. A mobile crop may have a different ratio from the desktop asset. The reserved dimensions should match the image selected at that breakpoint, not just the original desktop file. Avoid setting a fixed height that clips content at narrow widths; the goal is to reserve the right space, not force the same composition everywhere.

After the change, reload with the cache disabled and watch the same region. The image should occupy its intended space before the file is decoded. If the page still shifts, inspect other late-arriving content rather than repeatedly changing the hero CSS.

Choose a font strategy with its trade-off in view

font-display: swap lets fallback text appear while the custom font loads. That avoids leaving text invisible, but it does not guarantee a stable layout: if the two fonts have different widths or metrics, the swap can change line wrapping and move the button below the headline.

First, choose a fallback that resembles the web font’s metrics. Where needed, use font metric overrides such as size-adjust, ascent-override, descent-override, and line-gap-override to bring the fallback’s text geometry closer. Test the actual hero copy at mobile width. A small metric difference can create an extra line and shift every element beneath it.

font-display: optional is another option when stable first-render geometry matters more than showing the custom face on every first visit. The browser may keep the fallback for that visit rather than swap in the font late. That is a real design trade-off: the branded typeface may not appear immediately for some visitors.

Preloading the critical font can help it arrive earlier, but it is not a substitute for compatible fallback metrics, and it does not reserve space for text. Preload only a font needed above the fold. Fetching unnecessary font files early can compete with other important resources, including the hero image.

Change one cause, then verify it

Make one change at a time. Fix the hero’s reserved dimensions, repeat the cold-load test, then address the font swap if movement remains. This prevents a combined CSS edit from obscuring which fix worked. Check headline wrapping, button position, and the full first viewport—not just the CLS number.

Run PageWisr again after the code change and compare its findings with the browser reproduction. A scan can help confirm that measured layout shift changed, but a lower score alone does not prove the page is easier to use. Confirm that the intended font appears when expected, the image crop still works at mobile widths, and no new gap or overlap was introduced.

The practical rule is simple: reserve image geometry, make fallback text behave like the final font, and verify on a cold mobile load. PageWisr helps locate page-level trouble; the browser trace tells you when it happens. Neither replaces the other.