Custom web fonts introduce a genuine tradeoff between visual consistency and text visibility during loading — font-display gives developers explicit, deliberate control over that tradeoff instead of accepting inconsistent default browser behavior.
1The Default Problem: FOIT
Without explicit configuration, many browsers historically default to hiding text entirely for a period while a custom @font-face font downloads — commonly called FOIT, Flash of Invisible Text. Users see a blank space exactly where text should render, sometimes for a noticeable duration on slower connections, directly and significantly hurting perceived page load speed even if the underlying content is otherwise ready.
This default behavior exists because browsers historically prioritized avoiding a visible font swap (a jarring visual change as text re-renders in a different font) over guaranteeing immediate text visibility — a tradeoff font-display lets developers override deliberately.
2font-display: swap: Prioritizing Visibility
font-display: swap explicitly instructs the browser to render text immediately using whatever fallback font is available (a system font, or a specified fallback in the font-family stack), and then swap to the custom font the instant it finishes downloading.
This produces a brief moment where text visually re-renders in a different font — commonly called FOUT, Flash of Unstyled Text — but this tradeoff is almost always strongly preferable to FOIT's alternative of no visible text at all. Users can begin reading immediately, with only a brief, generally minor visual adjustment once the intended font is ready.
3The Best Combined Strategy: preload Plus swap
The two techniques address different, complementary parts of the same problem. rel="preload" (from the earlier lesson in this module) accelerates *when* the font file begins downloading, starting it as early as possible rather than waiting for the browser's natural, later CSS-driven discovery. font-display: swap ensures text remains visible and readable throughout whatever download time remains.
Combined, these minimize both dimensions of the problem simultaneously: the font is ready sooner (preload), and text is never invisible while waiting for it (swap) — together producing meaningfully better perceived performance than either technique alone.
4Step-by-Step Breakdown
Text Shouldn't Wait For A Font File. Custom web fonts have to download before they can render — but what should happen to your text in the meantime? Invisible until ready? Rendered immediately in a fallback font, then swapped? font-display lets you choose deliberately instead of accepting the browser's default.
FOIT: Flash Of Invisible Text. By default, many browsers hide text entirely while a custom font loads (FOIT — Flash of Invisible Text), meaning users see a blank space where text should be until the font file finishes downloading, directly hurting perceived load speed.
Understanding FOIT. What does FOIT (Flash of Invisible Text) mean for a user loading a page with a custom web font?
- →Text flickers through different colors while loading
- →Text is completely invisible/blank until the custom font finishes downloading
- →Text always loads instantly with no delay
font-display: swap Shows Fallback Text Immediately. font-display: swap tells the browser to render text immediately using a fallback font, then swap to the custom font once it finishes loading — trading a brief visual font change (FOUT: Flash of Unstyled Text) for immediately readable content.
font-display: swap Behavior. With font-display: swap, what happens to text while the custom font is still downloading?
- →It remains invisible, identical to the default
- →It renders immediately in a fallback font, then swaps to the custom font once loaded
- →The entire page fails to render until the font loads
Combining preload With font-display For The Best Result. Pairing rel="preload" (from the earlier preload lesson) on the critical font file with font-display: swap gets the best of both: the font starts downloading as early as possible AND text remains visible throughout, minimizing both the delay and the visual jump when the swap occurs.
Combining Font Loading Techniques. Why does combining preload with font-display: swap produce a better result than font-display: swap alone?
- →There's no meaningful difference; swap alone is sufficient
- →The font starts downloading earlier (preload) AND text stays visible throughout (swap), minimizing both delay and visual jump
- →It completely eliminates any visual font swap entirely
Font Loading Mastered. You now understand FOIT's invisible-text problem, how font-display: swap trades it for an immediate fallback with a brief later swap, and how combining swap with preload (from the earlier lesson) produces the best overall font-loading experience.
Preload A Web Font Correctly. Font preloading needs as="font" and crossorigin, even for same-origin fonts.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Invisible Text (FOIT) Is A Direct Barrier For Users On Slow Connections Or Older Devices
Users least able to afford waiting — those on constrained networks or hardware — are precisely the ones most affected by extended invisible-text periods; font-display: swap directly benefits this population.
SEO Implications
- 1
font-display: swap Directly Improves Perceived Load Speed And Can Positively Affect LCP
If a text element is the LCP candidate, ensuring it renders immediately (even in a fallback font) rather than waiting invisibly for a custom font directly improves that measured Core Web Vitals timing.
Best Practices
Always Set font-display: swap (Or A Similarly Visibility-Prioritizing Value) On Custom @font-face Declarations
It's a single CSS property change that eliminates the significant, avoidable FOIT problem for the overwhelming majority of real content use cases.
Combine font-display: swap With preload For The Site's Most Critical Font Files
Together they address both when the font becomes available and what happens to text visibility in the meantime, producing the best achievable combined result.
Frequent Bugs
Text is invisible for a noticeable period on page load before a custom font finishes downloading.
Add font-display: swap to the relevant @font-face declaration, ensuring fallback text renders immediately.
A critical heading using a custom font takes unnecessarily long to reach its final, correct appearance.
Preload the specific font file in addition to using font-display: swap, accelerating when the font itself becomes available.
Real-World Examples
A Complete, Optimized Font Loading Setup
A site's primary heading font, both preloaded and configured for immediate text visibility.
<link rel="preload" href="/fonts/heading.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: 'HeadingFont';
src: url('/fonts/heading.woff2') format('woff2');
font-display: swap;
}
</style>