Overview

The Typography tab of the theme editor sets what your app's text looks like: which font families it uses and how big each level of text is. Typography is token-driven — you adjust one base size and the whole type scale moves together, keeping headings, body text, and captions in proportion automatically.

Font Families

A theme carries two font choices:

• Text font — used for all regular text and headings. One pick covers both.

• Code font — used wherever the app renders code-styled text.

Built-in Font Options

Available built-in fonts include: DM Sans, Figtree, IBM Plex Sans Arabic, Geist, Instrument Sans, Inter, JetBrains Mono, Lato, Lexend, Manrope, Merriweather, Mono, Nunito, Open Sans, Poppins, Roboto, Source Serif 4, Spectral, and Special Gothic Expanded One.

Defaults are Geist for text and JetBrains Mono for code.

Note: One text font for both headings and body: The theme's Text Font applies to headings and body text alike — there is no separate heading font in the theme editor. If a design calls for a distinct display face, override the individual font-family tokens directly via Tokens & Custom CSS. Headings and body text read from two different underlying tokens (--fontFamily-display and --fontFamily-text) that the picker sets together.

Font Family Tokens

Custom Uploaded Fonts

Uploading a custom font lives on the Fonts tab (immediately left of Typography in the editor). The Typography tab only selects a family — it doesn't add one. Once uploaded, a custom family appears in the Text font and Code font pickers.

Uploading via the Fonts Tab

1. Open the theme's Fonts tab.

2. Click Upload Font to open the Add Custom Font dialog.

3. Drop in the font file — static or variable, TTF, OTF, or WOFF2 formats are accepted. Variable fonts and font collections are supported, so a family's weights and styles come in together.

4. Give it a Font name.

5. Click Add. The font now appears in the Fonts table and in the Typography tab's pickers.

Tip: Fonts tab features: The table lists uploaded families alongside built-in System fonts, with who owns each one and when it changed. Switch between them with the All fonts / System / Custom tabs, and search with Search fonts. Each custom row offers Edit (update font) and Delete Font.

Warning: Deleting a custom font is irreversible. Any text using that font will fall back to the default font.

How custom fonts behave at runtime

• They're preloaded. Every custom font file is fetched as soon as the app loads, in parallel with the page itself, so text doesn't visibly swap from a fallback.

• They appear in rich-text pickers. Custom families show up by name in font pickers of rich-text editing surfaces alongside built-in fonts.

Per-file weight and style

Each file in a custom font family declares its weight (for example 400 or 700) and whether it is the italic cut. This is how the app knows which file to use when text is bold, italic, or both. A weight/style combination with no uploaded file falls back to the browser's synthetic rendering of the nearest available file.

The Type Scale

Text sizes are organized as a named scale, grouped by how you'd use them:

Blocks reference these levels rather than raw pixel values, so retuning the scale restyles every piece of text that uses it.

Base Font Size

The scale hangs off a single Base Font Size (the Body 4 level, defaulting to 14px). Change it, and every other level shifts by a proportional amount. Each level's line height is also recomputed automatically to keep text comfortable (looser for body text, tighter for large headings).

Warning: Headings move twice as fast as body text. When you raise the base size by 1, body levels grow by 1 — but headings grow by 2. This keeps the visual hierarchy pronounced as the scale grows, but a small base bump changes headlines more than you might expect. Check your largest headings after adjusting the base.

Typography Token Reference

The complete list of size and line-height tokens written by the Typography tab. Use these in Tokens & Custom CSS for fine-grained overrides.

Related Pages

• Theme Builder — how typography fits into the whole theme

• Tokens & Custom CSS — overriding individual font-size or font-family tokens directly

• Colors & Color Scheme — the color system