A browser waiting on a web font shows nothing where the text should be — for up to three seconds in most engines — and on a slow connection that is the entire perceived load time.
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-display: swap;
font-weight: 400;
}swap renders immediately in the fallback and swaps when the font arrives, which trades a visible reflow for text that can be read. The reflow is worth minimising by choosing a fallback with similar metrics, and optional is the alternative for anyone who would rather never swap than swap late. Preloading the font file alongside this is the other half — font-display controls what happens while waiting and does not shorten the wait.