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.
2 font-family: "MyFont";
3 src: url("MyFont.woff2");
4}
5/* No font-display: text invisible until load (FOIT) */
2 font-family: "MyFont";
3 src: url("MyFont.woff2");
4 font-display: swap;
5}
6/* Fallback visible immediately, then swap */
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.