Fraunces Variable Font

Added Fraunces (variable optical serif) as the third web font in WitWiki.

  • Import: next/font/google Fraunces, axes: ['opsz'], weights 300–700
  • CSS variable: --font-serif
  • Use: folio register — wiki page body text only, not app chrome
  • File: web/src/app/layout.tsx

Why Fraunces

Variable optical sizing (opsz axis) means the font is heavier at display sizes and lighter at text sizes — automatically. This makes agent-written wiki content feel like a document that was written, not generated.

Fraunces is the only variable optical serif in the Google Fonts catalog free of cost, with full Latin coverage and the opsz axis. No other dev tool in the category uses it.

Loading config

const fraunces = Fraunces({
  subsets: ['latin'],
  axes: ['opsz'],
  weight: ['300', '400', '500', '600', '700'],
  variable: '--font-serif',
  display: 'swap',
})

The variable is injected on <html> alongside --font-mono and --font-display.