To prevent disruptive 'Flash of Unstyled Text' (FOUT) or 'Flash of Invisible Text' (FOIT) when using web fonts, strategically implement the 'font-display' property within your '@font-face' rules. 'swap' is great for critical content, ensuring text is immediately visible with a fallback while the web font loads, then swaps when ready. 'fallback' offers a short block period before falling back, then swaps if the font loads quickly. For non-critical fonts, 'optional' can improve initial render performance by only loading the font if the network is idle or if it's cached.
@font-face {
font-family: 'Inter UI';
src: url('/fonts/Inter-Regular.woff2') format('woff2'),
url('/fonts/Inter-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap; /* Options: block, swap, fallback, optional */
}