Fonts

Your site's fonts live in Tokens → Typography, under Font families. Each entry is a font slot with a name, such as heading or body, and the font it uses. Elements on your site use a slot, so changing the slot's font changes every element that uses it.

Change a slot's font

Add a font slot

1. Click Add.
2. Enter a Slot name, such as display. Names use letters, numbers and hyphens, and start with a letter.
3. Under Font, click Choose a font…, pick a font, and click Use this font. The new slot is added.

To use the new slot, pick it in the Style panel under Typography → Font, or ask the AI.

See a font's details

Choose See font from the slot's menu. You see a specimen and Font details: Token, Source, CSS stack, Styles and Language support. Click Change font to pick a different one.

Rename a slot

Double-click the slot's name, type the new name, and confirm in Rename font slot?. Everything that uses the slot is updated to the new name.

Delete a slot

Choose Delete font from the slot's menu. If the slot is in use, Token in use lists where. Click Remove Anyway to delete it. Elements that used it fall back to your page's default font. Your site must keep at least one font slot.

Fonts are hosted with your site

Fonts you pick from the Google Fonts catalog are downloaded and hosted along with your site. Your visitors' browsers load them from your site, never from Google, so no visitor information is sent to Google.

Fonts with many separate weights make your pages heavier. Variable fonts cover all weights in one file.

Set the default font

The font used for text that doesn't set its own is the Font in Page defaults.

Ask the AI instead

• Use a classic serif for headings and a clean sans-serif for body text.
• Pick fonts that feel playful but stay readable.

Related

• Design tokens: why your site has them
• The Style panel
• Page defaults