Choose your fonts

Your site uses three fonts: one for body text, one for headings and one for the menu. You choose them in the Fonts panel of the Design editor from a catalogue of system fonts and Google fonts, and you can browse through the catalogue while watching the preview update.

Open the panel

1. Open your site in the dashboard and choose Design in the sidebar.
2. Click Fonts.

The three font slots

Each slot shows the current font's name and a sample line, both rendered in that font, so you can see it without opening anything.

Pick a font

1. Click a slot to open its list. The list is grouped into System fonts and Google fonts.
2. Either scroll and click a font, or type in Search fonts… to filter by name.
3. Picking a font applies it to the preview right away and keeps the list open, so you can keep comparing. Press Escape or click outside the list to close it.

Tip: With a slot's list open, press the up and down arrow keys to step through the fonts one by one. The preview changes with every step, which is the fastest way to audition a long list. Once the list is closed, the arrow keys do nothing.

Every slot always has a font; you cannot leave one empty.

View full size

System fonts and Google fonts

• System fonts use whatever your visitor's device has installed, so they load instantly and look slightly different from one device to another.
• Google fonts are downloaded from Google's font service when a visitor opens your site, so they look the same everywhere.

Only the fonts you have selected are loaded on the live site.

Sizes and weights

The Fonts panel only picks the families. Sizes and weights are set elsewhere so they stay consistent:

• Global Styling panel: Heading font size, Heading font weight, Body font size and Body font weight. Sizes are a percentage change from the default, so 0 keeps the default and -20 is a fifth smaller. Weights run from 100 (thin) to 700 (bold).
• Desktop Menu, Mobile Menu or Navigation Menu panel: Menu font size, Menu font weight, Uppercase and Letter spacing for the menu.
• Logo & Favicon panel: size, weight, uppercase and letter spacing for the site name.
• Page Heading and Section Heading panels: size and weight for those headings specifically.

Note: Not every font includes every weight. If you pick a weight the font does not have, the browser shows the closest one it does have.

Undo a font change

The panel's title row has undo and redo buttons. Opening a slot, browsing and closing it again counts as one step, so undo takes you back to the font you had before you opened the list.