Web fonts still ship with a built-in dilemma: show fallback text that swaps later (FOUT), or hide text until the font arrives (FOIT). One causes a visible jolt and layout shift; the other makes your page unreadable during the most important second of its life. Both are losing moves—and both are avoidable.

The three-move opening

Self-host and preload. Third-party font CDNs cost a connection setup before the download even starts. Host the two or three weights you actually use, subset them, and preload the critical one:

<link rel="preload" href="/fonts/inter-var.woff2"
      as="font" type="font/woff2" crossorigin>

Choose swap honestly. font-display: swap shows real text immediately—correct for body copy. For display headlines where the swap is jarring, optional is the grown-up choice: first visit renders the fallback, the font caches silently, every later visit is perfect.

Kill the shift, not just the flash

@font-face {
  font-family: "Inter-fallback";
  src: local("Arial");
  /* metrics tuned so the swap moves nothing */
  size-adjust: 107%;
  ascent-override: 90%;
}

Metric-adjusted fallbacks are the piece most sites skip: tune Arial’s size-adjust until line lengths match your web font, and the swap stops moving text at all—CLS from fonts drops to zero. Tools generate these overrides automatically.

“The best font loading strategy is the one users cannot describe, because they saw nothing happen.”

Preload the body font, swap with tuned fallbacks, optional for the decorative faces. Fonts become like electricity—only noticeable in failure.