Performance

Web Font Loading

Web font loading refers to how custom fonts (Google Fonts, Adobe Fonts, Shopify theme fonts) are downloaded and applied to text. Poorly configured font loading can cause Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT) — both of which contribute to CLS and poor perceived performance.

Why It Matters for Shopify Stores

Custom fonts are one of the most commonly overlooked performance issues on Shopify stores. A theme with 3–4 custom font weights can add 200–400KB to initial page load and cause text to be invisible for 1–3 seconds until fonts download. The font-display: swap CSS property makes text visible immediately using a fallback font, then swaps to the custom font when ready — eliminating FOIT and improving FCP.

How to Check Your Store

In Chrome DevTools Network tab, filter by 'Font' type. Check font file sizes and whether they're loaded from an external CDN (slower) or self-hosted.

Use the free shopify speed test tool

How to Fix It

Add font-display: swap to all @font-face declarations. Preload critical fonts using <link rel='preload'>. Limit custom font weights to 2–3. Consider using variable fonts to reduce multiple weight files to one.

Related Terms

FCP (First Contentful Paint)

Core Web Vitals

First Contentful Paint marks the point when the browser first renders any text, image, or non-white content to the screen.

CLS (Cumulative Layout Shift)

Core Web Vitals

Cumulative Layout Shift measures visual instability — how much page elements unexpectedly move while the page is loading.

Render-Blocking Resources

Performance

Render-blocking resources are CSS or JavaScript files that prevent a browser from displaying page content until they've fully downloaded and parsed.

Critical CSS

Performance

Critical CSS refers to the minimum CSS required to render the above-the-fold content of a page — the part visible without scrolling.

Check your store's Web Font Loading with our free tools

Get a full audit across all 6 performance categories — including performance — in under 60 seconds.

Run a Free Store Audit