Typography and fonts
Edit text, choose a font family and weight, set size and alignment, and see how fonts reach your visitors.
Use this page when you want to change the words on a screen, pick a typeface that matches your brand, or understand what loads on your site when a screen uses a custom font.
Edit text
Select a Text layer, on the canvas or in the Layers panel. The Design panel opens with a Content box. Type your words there.
- The text you edit belongs to the language shown in the Preview language menu above the canvas. If that is not the default language, you are editing the translation. See Localization.
- Click the Insert Variable button (the one with braces, next to the Content heading) to put a variable such as
{{ product.price }}where your cursor is. See Variables. - Texts in buttons, plan cards and answers are Text layers too. Select the Text layer inside the button to change its label.
Formatting inside a text
A text accepts a small set of Markdown-style marks:
| You type | You get |
|---|---|
**bold** | Bold |
*italic* | Italic |
~strikethrough~ | Strikethrough |
`code` | Monospace |
[label](https://example.com) | A link that opens in a new tab. Only http, https, mailto, tel and relative links work; anything else shows as plain text. |
| A backslash at the end of a line | A line break |
Values that your site passes in, such as custom variables or product names, are shown as plain text and never as markup.
Typography settings
Select a Text layer and look at the Typography section.
| Setting | Options | Default |
|---|---|---|
| Font | Default (system font) or one of 17 families | Default |
| Weight | The weights that exist for the chosen family | Regular (400) |
| Size | A preset or Custom | 14 px (Body M) when not set |
| Alignment | Leading, Center, Trailing | Center when not set |
Font and weight
Open the Font menu. It groups the 17 families under Sans serif, Serif, Display and Rounded. The first entry, Default (system font), uses the browser's default sans-serif font.
The Weight menu only lists weights that exist for the family you chose. If you switch to a family that lacks your current weight, the editor picks the closest weight it has.
With Default (system font), the Weight menu offers the nine named weights:
| Weight | Value |
|---|---|
| Extra light | 100 |
| Thin | 200 |
| Light | 300 |
| Regular | 400 |
| Medium | 500 |
| Semibold | 600 |
| Bold | 700 |
| Extra bold | 800 |
| Black | 900 |
Font families
| Family | Group | Weights |
|---|---|---|
| Inter | Sans serif | 400, 500, 600, 700, 800 |
| DM Sans | Sans serif | 400, 500, 700 |
| Manrope | Sans serif | 400, 500, 600, 700, 800 |
| Plus Jakarta Sans | Sans serif | 400, 500, 600, 700, 800 |
| Space Grotesk | Sans serif | 400, 500, 700 |
| Outfit | Sans serif | 400, 500, 600, 700, 800 |
| Sora | Sans serif | 400, 600, 700, 800 |
| Fraunces | Serif | 400, 600, 700, 900 |
| Newsreader | Serif | 400, 500, 600, 700 |
| Instrument Serif | Serif | 400 |
| DM Serif Display | Serif | 400 |
| Playfair Display | Serif | 400, 700, 900 |
| Archivo Black | Display | 400 |
| Unbounded | Display | 400, 600, 800 |
| Syne | Display | 400, 600, 700, 800 |
| Nunito | Rounded | 400, 600, 700, 800, 900 |
| Fredoka | Rounded | 400, 500, 600, 700 |
All of these are open-licensed (SIL OFL or Apache) for commercial use.
Size
The Size menu shows pixel values. Each one is a named step of the renderer's size scale:
| Step | Size |
|---|---|
| Body S | 13 px |
| Body M | 14 px (default) |
| Body L | 15 px |
| Body XL | 16 px |
| Heading XS | 14 px |
| Heading S | 16 px |
| Heading M | 18 px |
| Heading L | 20 px |
| Heading XL | 26 px |
| Heading XXL | 32 px |
Choose Custom to type any whole number of pixels (at least 1).
Alignment, size and spacing
Alignment sets where the words sit in the text box: Leading (left in left-to-right languages), Center or Trailing. The same panel also has Size (width and height of the text box), Spacing (padding and margin), Text Color and an optional Background Color. See Colors and dark mode for color fields and the contrast check.
Text states inside plan cards and answers
A Text layer inside a plan card, an answer, or a tab button has two tabs at the top of the panel: Default and When selected. Use When selected to change the font, size or color when the card or answer is picked. See Packages and pricing.
How fonts reach your visitors
You never upload font files. This is what happens when you choose a family:
- The editor writes the font and weight into the Text layer, in the form
Family@weight(for exampleFraunces@700). - It adds that font to the list of fonts the screen needs, with the address of the file for that exact weight.
- The file comes from the Fontsource project through the jsDelivr network, at a pinned version, so a published screen never changes under you. Each weight is its own file, and only the weights a screen uses are loaded.
- The editor canvas, the preview links, thumbnails and the Web SDK all read the same list, so a font looks the same everywhere.
The font list is saved with the screen. When you publish, the published version carries it.
The catalog files are the Latin character set. Text in other scripts, such as Cyrillic, Greek or Japanese, draws with a fallback font in the visitor's browser. Check translated screens on the canvas by switching Preview language.
If your site sets a Content Security Policy, allow https://cdn.jsdelivr.net in font-src. See Security and CSP.
A screen imported from JSON may name a font that is not in the list above. The Font menu then shows that name as an extra entry and keeps it. The editor has no font upload.