How do you load web fonts without causing layout shift or hiding text?

Self host the font, preload the one file needed for first paint, and use font display swap so text is visible immediately. Then remove the shift by matching the fallback metrics with size adjust, ascent override and descent override, or by using a generated fallback face. Subset the font to the characters you actually use, ship woff2 only, and avoid loading multiple weights when variable fonts cover the range.

The shift happens because the fallback font has different metrics, so when the real font arrives every line re flows and everything below it moves. So there are two problems to fix: when the text appears, and how much it moves when it changes. For the first, I self host the font, preload only the file needed for the initial view, and use font display swap so no one stares at a blank block of text on a slow connection. For the second, I override the fallback metrics, size adjust plus ascent and descent overrides on a local fallback face, so the fallback occupies almost exactly the same space and the swap is barely visible. Beyond that it is hygiene: woff2 only, subset to the character set actually used, and a variable font instead of four static weights. On one site that was pulling three weights from a third party origin, moving to a self hosted subset variable font cut about 180 kilobytes and took CLS from roughly 0.18 to under 0.02.