Fonts

How the CLI sets up fonts and how to change them.

During init, the CLI scans for existing fonts (next/font imports, @font-face rules, Google Fonts links) and prompts for one of three strategies. The choice is saved to stera.config.json under fonts.strategy.

Strategy	Behavior
`stera-default`	Installs Geist Sans + Geist Mono. Uses `geist` on Next.js, `@fontsource-variable/geist*` elsewhere.
`keep-existing`	Leaves your fonts alone. Wires the Stera tokens to whatever font variables you already expose.
`skip`	No font work. Configure manually.

How fonts plug into Stera UI

All Stera typography reads from two CSS variables defined in stera-ui.css:

:root {
  --font-heading: var(--font-geist-sans);
  --font-sans: var(--font-geist-sans);
}

To use a different font, point these variables at it. Edit stera-ui.css directly, or override in globals.css after the @import "./stera-ui.css" line. Installing the font itself (via next/font, fontsource, @font-face, etc.) is a regular framework task — Stera UI only cares about the two variables.