Fonts & Typography

Loading fonts

• ★ next/font — built into Next.js; downloads at build time; eliminates layout shift; auto-subsets Google fonts. The default for Next.js.
• ★ Fontsource — npm packages for ~1500 open-source fonts; works with any framework. The default outside Next.js.
• @vercel/og — for OG image generation, supports fonts (OG Images).
• fontaine (UnJS) — fallback font metric override; reduces CLS on top of self-hosted fonts.
• Google Fonts CSS API — easiest, but third-party requests; less recommended for privacy and CLS reasons.
• Adobe Fonts (Typekit) — paid; via Adobe CC subscription.

Local-first / self-hosted fonts

• Bunny Fonts — Google Fonts mirror, GDPR-friendly, free CDN.
• Coollabs Fonts — same idea.
• For self-hosting, generate woff2 only (the only format you need in 2026), serve with font-display: swap and Cache-Control: public, max-age=31536000, immutable.

Variable fonts

• ★ Variable fonts are mainstream in 2026; use them. One file, many weights / widths / italics. Common picks: Inter, JetBrains Mono, Geist, DM Sans, Plus Jakarta Sans, Manrope.
• Fontsource Variable packages give you woff2 variable axes.

Subsetting / minimization

• ★ glyphhanger — calculate actual glyph usage from your site and subset to just those characters.
• subfont — automated subsetting integrated into your build.
• fonttools (Python pyftsubset) — the gold standard for manual subsetting.
• @unfont/unfont — newer pure-JS subsetter.
• Cloudflare Fonts — auto-subsets and rewrites for you on the edge (free).

Reducing CLS (cumulative layout shift)

• ★ Adjust fallback metrics — size-adjust, ascent-override, descent-override, line-gap-override in @font-face. fontaine automates this.
• font-display: swap — show fallback immediately, swap when web font loads.
• Preload critical fonts with <link rel="preload">.
• Don't load too many weights — usually 400, 500, 700 is enough.

Fluid typography & responsive scales

• ★ Utopia.fyi — tool to generate fluid type scales between breakpoints; pair with clamp() in CSS.
• Tailwind v4's fluid type plugin patterns.
• Capsize — calculates exact font metrics so your bounding box matches the visible glyphs (no random padding).
• Modular scale — multiply a base size by a ratio (1.125, 1.25, etc.) for harmonious size steps.

Text effects / animation

• SplitType — split text into spans for character / word animation.
• TypeIt — typing-animation library.
• gsap.utils.split — GSAP's text splitter; most powerful.
• Motion + manual span splitting — see Animation.

Icon fonts vs. SVG icons

In 2026, use SVG icons (Icons) — Lucide, Phosphor, Iconify. Icon fonts are legacy.

Typography linting / hygiene

• smartypants / typography.js — auto-fix curly quotes, em dashes, ellipses.
• @stylistic/eslint-plugin — keeps your CSS-in-JS tidy.
• react-wrap-balancer — avoids orphan / awkward line breaks for headings.
• text-wrap: balance / text-wrap: pretty — native CSS in 2026; supersedes the polyfills.

Pick this if…

• Default Next.js project: next/font + Inter or Geist.
• Default non-Next: Fontsource + a variable font.
• Reduce CLS on self-hosted fonts: fontaine.
• Cloudflare-hosted site, want fonts handled: Cloudflare Fonts (one toggle).
• Fluid type scale: Utopia.fyi + clamp().
• Heading line-balance: native text-wrap: balance or react-wrap-balancer as fallback.