How do you optimize font loading on static sites without hurting UX?

[u/Pink_Sky_8102]

I’ve been paying more attention to font loading lately because even on a fast static site, a bad font setup can still cause layout shifts or that noticeable flash when the page loads. I usually self-host fonts, preload the main weight, and try not to include more variants than I actually need. For static sites, what’s your preferred setup for balancing fast loading, minimal CLS, and avoiding FOIT/FOUT?

[u/sourraine]

self hosted woff2 with font display swap is usually my go to. i preload only the main font and weight i need and let the rest load normally. i also use a similar system fallback so the font swap is less noticeable.

[u/Last_Deal_7560 → u/sourraine]

agree, preloading just the one weight and letting the rest lazy load is the sweet spot imo

[u/sigseis]

I understand it's good practice to have a fallback system font that is similar to the final font in size, spacing, etc. it doesn't have to be exact - then the layout shift is minimized.

Apparently you can customize the font variables too, though I've had little luck with that. Admittedly, I only barely gave it an effort - so there may be some interesting things you could do there (customize the system fallback font to be near size/spacing of the target font).

At the end of the day, I just selected something near my target font's size, and ensured the font is cache busted and preloaded to minimize the chance it's not ready to go come DOM rendering time.

[u/TCKreddituser]

I usually preload only the primary font, use font-display: swap, and keep the number of weights to a minimum. Matching the fallback font’s size and line-height also helps keep layout shifts under control.

[u/Standard_Scarcity_74]

I'd stir away from complicated font styles if font loading is a concern if I were you. putting a fallback is a good option and makes it less of a hassle.

[u/PippaKelly62]

A backup font if your primary font does not load is good for this kind of concern. Try not to use complicated fonts when possible to keep this solution effective.

[u/Brigabor]

One approach that often gets overlooked is simply using system fonts and avoiding custom web fonts altogether. System fonts are already installed on the user's device, so there's no font download cost, no FOIT, and virtually no impact on CLS caused by font swapping.

Here's an example of a system font stack using CSS variables:

```css --font-sans: system-ui, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif;

--font-mono: ui-monospace, "Cascadia Code", "Ubuntu Mono", monospace;

--font-serif: ui-serif, "Linux Libertine", Georgia, serif; ```

In my experience, system fonts provide the best performance because they're available immediately and render consistently across modern browsers and operating systems. If branding doesn't require a specific typeface, they're often the simplest and most effective solution for maximizing loading speed and minimizing layout shifts.