Reviewed November 8, 2026

Web Fonts and LCP: Why Your Theme's Fonts Delay the First Paint

The page loads, the images appear, and the text is invisible for a second and a half. Then the font arrives and the text pops in, shifting the layout as it does. That delay is the web font, and it is usually the second-biggest cause of a slow LCP after the hero image.

Web fonts are the most accepted slowdown in ecommerce. The theme picker offers a dozen fonts, the store picks three, and each one is a file the browser must download before the text can render. The fixes are small and specific: show the text first, preload only what matters, and cut the fonts you do not need.

Why the text waits for the font

The browser's default behavior for a web font is to hide the text until the font loads, which is called a flash of invisible text. The text is in the page, the browser has it, and it refuses to show it, because the font has not arrived. On a slow mobile connection the font takes a second or more, and the page looks broken for that second.

The fix is one CSS value: font-display swap. It tells the browser to render the text immediately in a fallback font and swap in the web font when it downloads. The swap causes a brief change in appearance, which is called a flash of unstyled text, but the text is visible from the start, and the first paint happens on time. Shopify's font library sets this by default on most themes, but a custom font added by hand often does not have it.

Preload, and only the fonts that matter

Preloading tells the browser to fetch a font early, before it discovers the font in the CSS. Preload the one or two fonts used above the fold, usually the heading font if the hero uses it, and let the rest load normally. Preloading every font on the page competes with the hero image for bandwidth, and the LCP element is the one that loses that competition.

The number of fonts is the bigger problem. Each font family, and each weight within it, is a separate file. A theme with four families and six weights carries a dozen font files on every page, and the browser downloads them all. Two fonts, one for headings and one for body, is the practical limit, and a store that needs a third should have a reason it can state out loud.

The system font option, honestly

A system font stack uses the fonts already on the visitor's device, so there is nothing to download and the text renders immediately. The trade is that the store looks different on every device: San Francisco on an iPhone, Roboto on Android, Segoe UI on Windows. A brand that needs a consistent look will not accept that, and the download cost of two web fonts is a fair price for consistency.

The honest answer is to measure. Run PageSpeed Insights on the homepage, look at the render-blocking resources, and see how much of the delay is fonts. If the fonts cost half a second of LCP, the swap and preload fix is worth doing today. If they cost a tenth of a second, the hero image is the problem, and the fonts can wait.

Frequently asked questions

What is font-display swap?

A CSS value that tells the browser to show fallback text immediately and swap in the web font when it arrives. Without it, the browser hides the text until the font loads, which is called a flash of invisible text, and it delays the first paint.

Should I preload my web fonts?

Preload the one or two fonts used above the fold, and no more. Preloading every font on the page competes with the hero image for bandwidth, and the LCP element loses. Preload the heading font if the hero uses it, and let the rest load normally.

Are system fonts faster than web fonts?

Yes, because there is nothing to download. A system font stack uses the fonts already on the visitor's device, so the text renders immediately. The trade is visual: system fonts look different on every device, and a brand that needs a consistent look will accept the download cost.

How many web fonts should a store use?

Two at most: one for headings and one for body text. Each additional font family, and each weight, is another file to download, and the files add up. A theme with four font families and six weights is carrying a dozen font files on every page.