Shopify font-swap CLS — FOIT/FOUT layout shift from web fonts.

Several Core Web Vitals failures look like “the page jumps.” They do not share a fix. This page is only when the jump is text reflow after a web font loads — FOIT (invisible glyphs while the font is blocked), FOUT (fallback glyphs then branded type), or font-display: swap without matched fallback metrics. When CLS is mostly images without width/height or App embeds shoving the layout, use cls-failing. When .woff2 / @font-face never loads (CORS, wrong Assets path, Shopify Fonts picker broken), use custom-fonts-not-loading-shopify. Largest Contentful Paint failing is page-speed-lcp-failing. The older overview is cls-layout-shift. Soft-link inp-failing when interaction delay is the failing vital, not layout shift.

Run PageSpeed Insights on the live homepage / collection / PDP (mobile). Open Layout shift culprits. If the highlighted nodes are headings, price, or body copy — and the filmstrip shows system fallback then your brand type — you have font-swap CLS. In Chrome DevTools → Network → Font, note the .woff2 start time vs first contentful paint. Performance → Experience → Layout Shifts: a shift score that lands when the font request completes is the smoking gun. Search Console URL groups marked Poor on CLS with the same templates confirm field CrUX pain. If culprits are images, banners, or late App embeds instead, leave this page for cls-failing.

In theme CSS / @font-face, check font-display. auto / block can FOIT (invisible text) then shove the layout; swap paints fallback fast but CLS unless metrics match; optional / fallback trade brand type for stability. Shopify Fonts (theme editor typography) vs self-hosted Assets .woff2 behave differently — self-hosted needs correct CDN CORS (if that fails, you are on custom-fonts-not-loading-shopify, not this page). Preload only the critical weight used above the fold (<link rel="preload" as="font" type="font/woff2" crossorigin>). Match fallback metrics with size-adjust, ascent-override, descent-override, line-gap-override so swap does not change line boxes. Soft-link ttfb-slow when the font file itself is late because of a slow HTML/TTFB path — fix TTFB first if the document is the bottleneck.

Page builders, reviews widgets, and marketing apps often inject a second Google Fonts or Typekit stylesheet after first paint — that is a classic FOIT/FOUT CLS source even when the theme fonts are fine. Disable App embeds one at a time on a duplicate theme. Loading four weights (300/400/600/700) above the fold multiplies swap risk — subset to the weights you actually paint. Late @font-face inside a section CSS that hydrates after the hero is worse than fonts in the shared theme CSS. Preview Dawn (or a stock Online Store 2.0 theme) to split theme vs app. Soft-link app-embed-blocking-theme when an embed also breaks the theme editor, and theme-app-extensions-not-appearing when the font app block never mounts in the customizer.

General CLS from images without dimensions, announcement bars, or App embeds shoving content is cls-failing. Custom fonts / @font-face that never load is custom-fonts-not-loading-shopify. LCP / largest contentful paint failing is page-speed-lcp-failing. The older layout-shift overview is cls-layout-shift. Soft-link cdn-images-broken when product images 404 and look like a CLS filmstrip issue. Do not rebuild every Core Web Vital until you have proven whether the shift score lands when the font request completes.

Stay DIY if you can set a sane font-display, preload one critical weight, match fallback metrics, and kill late app font injectors in under an hour. Pay for the Latch AI Ops install when you want lead capture, ops alerts, and a checkout-ready workflow on the live store — including storefront exception alerts landing in a channel you already check. Clock starts when collaborator access is in. 72 hours. One live store. Written by Nico. No earnings claims. No ranking-lift or conversion-lift number.

Buy the 72-hour install — $997CLS failing (general)Custom fonts not loading