You begin reading a heading. A moment later, its last word drops onto another line and the paragraph underneath moves down. The page seemed ready, but its lettering had not finished arriving.
A downloaded font can cause this kind of movement. The browser may first arrange the text using another font, then replace it when the intended one becomes available. If the two take up different amounts of space, the layout can change too.
That is one possible cause of a jumping page, not a diagnosis for every website. The useful question is what changed just before the movement: the type, an image, a banner or something else.
The words can arrive before their typeface
Web pages can use fonts already available on a device or load font files separately. While a requested font is unavailable, a fallback gives the browser another way to lay out the text.
Google's guidance on font-related layout shifts describes both visible fallback text and an initially invisible-text approach. Either can shift when the downloaded font arrives. Invisible text still occupies layout space using fallback measurements.
The important difference is between the words and the shapes used to display them. The words may already be present while the intended letter shapes are still loading. A page can therefore have its content and still change its appearance.
A small change can move a whole paragraph
Consider a heading that nearly fills one line. If a replacement typeface makes the words slightly wider, the last word may no longer fit. The browser puts it on a second line. Everything below that heading now begins lower down.
This is an illustrative geometry problem, not a measured result from a customer website. It explains why a small difference in letter widths can produce a much larger-looking movement elsewhere on the page.
The same reasoning applies to a paragraph. A few changed line breaks can alter its total height. Watching the bottom of the paragraph move may make the fault seem distant from the font that triggered it.
On a narrow screen there is less horizontal space to absorb a change. A desktop screenshot showing one neat line cannot establish what will happen on a phone during loading.
Showing text quickly and keeping it still are separate goals
The CSS setting called font-display helps determine how text appears while a font is being downloaded. MDN's reference explains its display strategies, including a swap period in which fallback text can be replaced by the loaded font.
This involves a choice about the loading experience. A strategy that makes words available promptly does not automatically make the fallback and final text occupy the same space. Conversely, hiding text briefly does not guarantee a stable final layout.
That is why “make the font load faster” and “make the two layouts match better” are different possible parts of a solution. The first concerns timing. The second concerns geometry.
The right approach depends on the actual font, its alternatives and the page. A setting copied from another website is not evidence that the problem has been fixed.
The backup font needs design attention too
Chrome's explanation of improved font fallbacks shows how differences between a web font and its fallback can cause movement. It describes adjustments to fallback size and vertical measurements to bring the two closer together.
For a business owner, the practical point is not to calculate those adjustments by eye. It is to include the temporary state in the design review. The final typeface is only one version of the page someone may encounter.
A good fallback should remain readable and make a reasonable stand-in for the intended design. Matching the broad category, such as serif or sans serif, can be a starting point; it does not guarantee matching line breaks.
Think of it like a temporary sign occupying the same position as the finished one. If its dimensions differ, nearby information may have to move when the replacement arrives. The web version does that rearranging automatically and visibly.
Describe the movement before asking for a fix
An owner can make a useful report without naming a CSS property. Record the page address, device and browser, then describe what moved and when. Does the type itself change? Does a picture appear above the text? Does the movement happen on the first visit but not when returning?
A short screen recording, when practical, can communicate the sequence better than a screenshot taken after everything settles. Avoid including private customer information in it.
Those observations guide investigation; they do not prove the cause. Google's layout-shift guidance also discusses missing image dimensions and content inserted later. A new banner can push a perfectly stable font down the page.
If you are discussing a website redesign with Time for Designs, bring that specific page and description alongside the broader requirements. “The heading changes and the enquiry button moves after loading on my phone” gives the conversation a clearer starting point than “the site feels slow”.
Review a sequence, not only the finished screen
The finished layout still matters. So does the route to it.
A font that looks attractive after loading may have arrived through an awkward flash or a jump. A fast-looking first screen may later move as other content appears. Neither state alone describes the whole experience.
The useful design aim is simple: let people read and use the page while it becomes ready. When the letters finally arrive, the reader should be able to keep their place.
Sources and scope
This explanation uses Google's layout-shift guidance, Chrome's fallback-font explanation and MDN's font-display reference. The line-wrap example is illustrative. No customer-site test, performance score or ranking improvement is claimed.