CodePark@font-face {
font-family: "Brand Sans";
src: url("/fonts/brand-sans.woff2") format("woff2");
font-display: swap;
}
They are the two ways a page can behave while a web font is still downloading.
- FOIT (Flash of Invisible Text): the browser hides the text until the font arrives. Users see empty space and can't read anything.
- FOUT (Flash of Unstyled Text): the browser shows the text in a fallback font first, then swaps in the web font. Users can read at once, but the text may jump when the font changes.
font-display in @font-face chooses the behaviour:
block: hide the text for up to about 3 seconds, then use the fallback. This is FOIT. Use it only for icon fonts, where fallback letters look wrong.swap: show the fallback at once and swap whenever the font arrives. This is FOUT. It is good for body text and headings.fallback: hide the text for about 100 ms, then show the fallback. The swap happens only if the font arrives within about 3 seconds.optional: about 100 ms of hidden text. If the font isn't ready, the browser keeps the fallback for this page view and caches the font for the next one. There is no late swap, so no layout shift.
The trade-off: swap puts reading first but can cause layout shift. optional puts stability first but some users never see the brand font on their first visit. You can make swaps smaller by tuning the fallback font with size-adjust, so it takes up the same space.
- FOIT means the text is invisible until the web font loads.
- FOUT means the text shows in a fallback font first, then swaps.
swapshows the fallback at once and swaps whenever the font arrives.optionalgives the font about 100 ms, and otherwise keeps the fallback, so there is no layout shift.blockhides text and suits only icon fonts.- A fallback font tuned with
size-adjustmakes the swap move less.