font-switcher-dev-tool

Font Switcher Dev Tool

When to Use

• User wants to preview/compare multiple fonts across an app
• User drops a folder of font files and wants them wired up
• User says "font switcher", "font selector", "try these fonts", "toggle fonts"
• User wants to evaluate typefaces before committing to one

Architecture

The font switcher works by overriding a single CSS custom property on <html>:

--font-active → picked up by --font-sans → applied to body

No re-renders. No class swapping. One CSS variable update per font change.

File structure:

public/fonts/<family-slug>/   ← font files (Regular + Bold minimum)
src/app/fonts.css             ← @font-face declarations
src/lib/fonts.ts              ← font metadata constants + helpers
src/contexts/FontContext.tsx   ← provider with localStorage persistence
src/components/FontSelector.tsx ← floating UI (bottom-right, grouped, random)

Step 1: Copy Font Files

Organize by family in public/fonts/. Use kebab-case directory names.

mkdir -p public/fonts/<family-slug>
cp "/path/to/FontName-Regular.otf" public/fonts/<family-slug>/
cp "/path/to/FontName-Bold.otf"    public/fonts/<family-slug>/

Include at minimum Regular (400) and Bold (700) weights. For variable fonts, one file covers all weights.

Step 2: Download Google Fonts (if needed)

Google Fonts only returns woff2 with a modern user agent:

# Get the CSS with woff2 URLs
curl -sL "https://fonts.googleapis.com/css2?family=FONT+NAME:[email protected]&display=swap" \
  -H "User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"

# Find the Latin subset src URL, then download it
curl -L -o public/fonts/<slug>/FontName-Variable-Latin.woff2 "https://fonts.gstatic.com/s/..."

Verify the downloaded file is >1KB (tiny files = redirect, not a font).

Step 3: Generate @font-face CSS

Create src/app/fonts.css:

@font-face {
  font-family: "Font Name";
  src: url("/fonts/<slug>/FontName-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Font Name";
  src: url("/fonts/<slug>/FontName-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}