You've probably seen it without knowing what to call it: you load a page, the text disappears for a split second, then suddenly appears once the font kicks in. That's the Flash of Invisible Text, or FOIT, and it's one of the sneakier ways custom fonts hurt your website speed optimization efforts.
The good news is that FOIT is completely fixable. Once you understand why it happens, the fix takes minutes, not days.
What Actually Causes the Flash of Invisible Text
Custom web fonts don't come baked into the browser. They have to be downloaded, just like an image or a script. By default, many browsers hide text until that font file finishes downloading. If your connection is slow, or the font file is large, that hidden text can sit invisible for one, two, even three seconds.
During that window, your visitor sees a blank page, or a page with missing text where headlines and paragraphs should be. It feels broken, even if the rest of the page loaded fine. And it directly hurts your Largest Contentful Paint (LCP) score, since text often is the largest visible element on the page.
FOIT vs. FOUT: Know the Difference
There's a related issue called Flash of Unstyled Text, or FOUT. Instead of hiding text, the browser shows it immediately in a fallback system font, then swaps to your custom font once it's ready. FOUT causes a visible jump as text reflows, which can trigger layout shift. FOIT hides the problem but delays content. Neither is great on its own, but FOUT is almost always the safer default because your visitor can read something right away.
The font-display Property Is Your First Fix
The single most effective fix for FOIT is the font-display CSS property. It tells the browser exactly how to behave while a font is loading.
@font-face { font-family: 'YourFont'; src: url('yourfont.woff2') format('woff2'); font-display: swap; }Here's what the common values actually do:
- auto - lets the browser decide, which usually means FOIT on older browsers
- block - hides text for up to 3 seconds, then falls back if the font isn't ready (this is what causes FOIT)
- swap - shows fallback text immediately, swaps in the custom font whenever it arrives, no invisible period at all
- fallback - a short 100ms invisible period, then a fallback font, with a small window to swap
- optional - browser decides whether to use the custom font at all based on connection speed, great for repeat visitors
For most sites, swap is the practical choice. It trades a tiny bit of visual jump for guaranteed readable text from the first render.
Preloading Fonts So They Arrive Sooner
Setting font-display: swap stops invisible text, but it doesn't make your font arrive faster. That's where preloading comes in. Browsers discover fonts referenced in your CSS fairly late in the page load process, often after the CSS file itself has been parsed. A preload hint tells the browser to fetch the font file immediately, in parallel with everything else.
<link rel="preload" href="/fonts/yourfont.woff2" as="font" type="font/woff2" crossorigin>A few rules of thumb here:
- Only preload fonts used above the fold. Preloading every font on your site delays other important resources.
- Always include crossorigin, even for same-origin fonts, or the preload silently fails in some browsers.
- Stick to WOFF2. It's smaller than WOFF or TTF and supported by every modern browser.
If you're running WordPress, this kind of font preloading is something a good optimization plugin or panel setting can handle for you automatically as part of LCP tuning, so you don't have to hand-edit head tags every time you change a theme.
Cutting Font File Size Before It Ever Loads
Even with swap and preload in place, a bloated font file still slows things down. Most font families include far more characters than your site actually uses. Subsetting strips out everything you don't need.
- Use tools like glyphhanger or Google Fonts' subsetting option to keep only the character sets you actually use (usually just Latin, unless you support other languages)
- Limit the number of font weights you load. Loading 6 weights of a typeface when you only use 2 in your design is a common and easy waste
- Self-host fonts instead of pulling from third-party CDNs when possible, since it removes an extra DNS lookup and connection setup, both of which add measurable delay
A well-subsetted WOFF2 file can shrink from 150KB down to 20-30KB, which is often the difference between a font finishing before first paint versus after it.
Putting It Together: A Realistic Loading Sequence
A well-optimized font strategy looks roughly like this:
- Preload the 1-2 critical font files needed above the fold
- Set font-display: swap on all @font-face declarations
- Serve subsetted WOFF2 files, self-hosted where possible
- Use font-display: optional for decorative or secondary fonts that aren't essential to readability
This combination usually gets rid of FOIT entirely and meaningfully improves both LCP and Cumulative Layout Shift, since text renders early and doesn't jump around as much once the swap happens.
We've covered related rendering bottlenecks in How Critical Rendering Path Optimization Gets Your Page Visible Faster, which is worth a read if you want the bigger picture beyond just fonts. And if LCP scores are still confusing you, How Largest Contentful Paint Scores Expose the Real Bottlenecks in Your Hosting Setup breaks down what's actually being measured.
The Takeaway
The Flash of Invisible Text is a small technical detail with an outsized effect on how fast your site feels. Fixing it doesn't require a redesign or new hosting plan, just a few lines of CSS and some attention to which fonts you're actually loading. If you're chasing better website speed optimization scores in tools like PageSpeed Insights or GTmetrix, checking your font-display values is one of the fastest wins available, and it's one you can knock out this afternoon.
For a broader look at page speed diagnostics beyond fonts, see our page speed analysis overview, and if you're managing this across multiple sites, our WordPress optimization tools can handle preloading and asset tuning without manual edits.
