Skip to main content

Typography Choices

Fonts can become render-blocking work, add extra network requests, and cause layout shift when the final font loads. A good font strategy keeps branding intact while keeping LCP and CLS predictable.

Default Recommendation​

If you do not have a strong branding requirement, prefer a system font stack. If you do need a brand font, self-host a WOFF2 (ideally variable) and keep the number of font files small.

StrategyRequestsRiskWhen to Use
System fonts0LowSpeed-first builds, docs, content sites
Self-hosted WOFF2 (variable)1-2MediumBrand sites that need a custom look
External font CDN2+Medium/HighOnly if you understand caching/preconnect and accept the tradeoff

CLS-Safe Font Loading​

Use font-display: swap so text renders immediately. Keep the fallback stack explicit so font swaps are less disruptive.

font-face-swap.css
@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 700;
  font-style: normal;
}

:root {
  --font-sans: "Brand Sans", system-ui, sans-serif;
}

body {
  font-family: var(--font-sans);
}

Preload only what you need for above-the-fold text (usually one font file):

preload-font.html
<link
  rel="preload"
  href="/fonts/brand-sans.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

Weight and Family Discipline​

  • Keep it to 1-2 families.
  • If using static fonts, keep it to 2-3 weights (regular + bold is often enough).
  • Prefer variable fonts over shipping many separate files.

How to Validate​

  1. DevTools -> Network: filter for "Font" and verify request count and total bytes.
  2. DevTools -> Rendering: enable "Layout Shift Regions" and reload.
  3. Lighthouse/PageSpeed: watch for font-related audits (text visibility, preload suggestions).
Advanced: reduce CLS with font metrics overrides

If a font swap still causes a visible jump, you can align fallback font metrics using properties like size-adjust, ascent-override, and descent-override on the fallback face.

This is optional and requires careful testing.

What's Next​