font-display: swap in CSS (Prevent Invisible Text)
Font loading without invisible text
Custom fonts used to cause a flash of invisible text (FOIT) while they downloaded. font-display: swap shows the fallback right away, then swaps when the font is ready.
@font-face { font-family: "MyFont"; src: url("MyFont.woff2");}@font-face { font-family: "MyFont"; src: url("MyFont.woff2"); font-display: swap;}font display Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2019.
Safe to use without fallbacks.
No FOIT
Users see fallback text right away instead of blank space while the font downloads.
One line
Add font-display: swap to your existing @font-face. No JS or loading strategy needed.
Other options
optional hides text if font is not cached; block gives a short invisible timeout. swap is the safe default.
How it works
Without font-display, the browser uses a default behavior that often hides text for a few seconds while the custom font loads. That is the flash of invisible text (FOIT). Users on slow connections see a blank area until the font file arrives.
Adding font-display: swap to your @font-face tells the browser to show the fallback font immediately and swap to the custom font when it is ready. Users can read right away; they may see a brief reflow when the font loads, but that is usually better than invisible text. Use it on every @font-face unless you have a reason to use optional or block.