Quick Fix with Thunder
Font files are rarely the only reason the warning appears. Heavy app scripts often delay CSS parsing and font discovery, so the browser starts font downloads late. Thunder defers non-critical JavaScript and improves first-render loading order, which gives the browser a cleaner path to CSS, fonts, and the hero image.
Use Thunder for automated script cleanup, then apply the font-specific fixes below. If your report also shows LCP or CSS issues, pair this with the Shopify font optimization guide, CSS optimization guide, and LCP guide.
Install ThunderWhat the Font Display Warning Means
Chrome flags "Ensure text remains visible during webfont load" when a custom font can hide text until the font file finishes downloading. That blank period is called FOIT: flash of invisible text. On a fast desktop connection it may last a few frames. On a mobile shopper's first visit, it can make headings, navigation, product names, or prices disappear long enough to feel broken.
The official Chrome guidance recommends using the font-display API so the browser can show a fallback font while the custom file loads. Web.dev's font best practices also warn that font loading can affect both perceived speed and layout stability.
This is a diagnostic warning, not a Core Web Vitals metric by itself. But it can influence LCP if your LCP element is text, and it can influence CLS if the fallback font swaps to a custom font with different dimensions. That is why the fix needs both visibility and stability.
Step 1: Find Which Shopify Font Is Failing
Open PageSpeed Insights, expand the font warning, and copy the listed font URLs. Shopify fonts usually come from fonts.shopifycdn.com, cdn.shopify.com, Google Fonts, Adobe Fonts, or an app vendor. Your fix depends on the source.
If the font is declared in your theme CSS, you can edit it directly. If it comes from Google Fonts, update the request URL. If it comes from an app widget, you usually cannot rewrite its @font-face rule; the practical fix is to remove the widget from the first viewport or ask the vendor for a modern build.
Before editing, run another store speed test and save the baseline. Font changes can improve visibility while accidentally hurting CLS, so compare before and after.
Step 2: Add font-display swap to Theme Fonts
For self-hosted theme fonts, add font-display: swap inside each @font-face block used for readable text:
@font-face {
font-family: 'Brand Sans';
src: url('{{ 'brand-sans.woff2' | asset_url }}') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
Use swap when brand typography matters and you want the custom font to replace the fallback once ready. Use optional when performance matters more than perfect typography; the browser may keep the fallback font for the whole visit on slow connections.
Step 3: Fix Shopify font_face and Google Fonts
Many Shopify themes output fonts through Liquid settings. If your theme uses Shopify's font_face filter, add the display option if your theme supports it:
{{ settings.type_header_font | font_face: font_display: 'swap' }}
{{ settings.type_body_font | font_face: font_display: 'swap' }}
For Google Fonts, make sure the URL includes &display=swap. Without it, Google may serve CSS that allows invisible text:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">Step 4: Preload Only the Critical WOFF2 Font
Preload helps when the font is used above the fold and is discovered late through CSS. It hurts when you preload every weight. Start with the single body or heading font that appears in the first viewport:
<link
rel="preload"
as="font"
type="font/woff2"
href="{{ 'brand-sans-regular.woff2' | asset_url }}"
crossorigin
>Do not preload five weights, italic variants, and icon fonts. Fonts compete with CSS and the LCP image. If the hero image is already late, use the hero image preload guide before adding more font preloads.
Step 5: Prevent Layout Shift from Font Swaps
The common mistake is fixing invisible text and creating layout shift. If your fallback font is much wider or taller than your brand font, the text reflows when the custom font arrives. Choose fallback fonts with similar metrics, keep line-height stable, and avoid using custom fonts for price blocks where a shift can move purchase buttons.
Test with the Shopify CLS fix guide. A good font-display swap implementation shows text immediately and keeps the page steady when the final font appears.
Manual Fix vs Thunder Fix
| Problem | Manual fix | Thunder fix |
|---|---|---|
| Invisible text | Edit @font-face and Liquid font output | Improves first-render order around CSS and fonts |
| Late font discovery | Preload one critical WOFF2 font | Reduces script competition in the critical path |
| App-injected fonts | Remove widget or ask vendor to fix CSS | Defers non-critical app widgets where safe |
| Related LCP delays | Tune CSS, fonts, hero image, and Liquid | Automates common Shopify resource ordering improvements |
FAQ
What does Shopify font display swap mean?
Shopify font display swap means your theme tells the browser to show fallback text immediately while a custom webfont loads. It prevents flash of invisible text, often called FOIT, and helps shoppers read the page before the brand font finishes downloading.
Why does PageSpeed show ensure text remains visible during webfont load?
PageSpeed shows this warning when a font file can hide text while it loads. Chrome recommends font-display: swap, fallback, or optional inside @font-face rules so the browser can use system text instead of blank text.
Can Thunder fix Shopify webfont load problems?
Thunder optimizes the loading order around critical resources and reduces competing scripts that delay font discovery. Theme-specific font declarations may still need manual cleanup, but Thunder helps the rest of the first render happen sooner.
Should every Shopify font use font-display swap?
Most readable text fonts should use swap or optional. Icon fonts need more care because fallback glyphs can look broken. For icons, SVG icons are usually a better long-term fix than a blocking icon font.
Does preloading fonts always improve Shopify speed?
No. Preload only one or two critical WOFF2 fonts used above the fold. Preloading every weight and style competes with the hero image and CSS, which can make LCP worse.
Why does font-display swap sometimes cause layout shift?
Swap can shift text when the fallback font has different metrics from the webfont. Use a similar system fallback, reduce font weights, and test CLS after changing font loading.
Fix Shopify font display swap the practical way
Add font-display to your theme fonts, preload only the critical WOFF2 file, and use Thunder to reduce the scripts delaying first render. For the full framework, use our complete Shopify speed optimization guide or compare the best Shopify speed apps.
See Thunder pricing