Typography

Give your site its own voice with three fonts: one for headings, one for body text and one for code. Choose them on the Typography tab, and every page, section, menu and button follows. Who can do this: Editors, Admins and Owners.

Open Typography

• In the toolbar (the bar across the top of your site once you’re signed in; see The toolbar), choose Site design, then the Typography tab.
• Or open the command palette (⌘K, or Ctrl+K on Windows), choose Site design, then Typography.

The tab opens with a guide card, Choosing your site fonts, and the Live preview · Site typography. Below them are three cards, one for each font. Choose a card to open it.

The three fonts

• Headings font: big headings and titles across your site.
• Body text font: paragraphs, menus, buttons and small labels. It’s the font for almost everything that isn’t a heading.
• Accent font: code and monospace text, such as a code sample in a blog post. Monospace (“mono” for short) means every letter takes up the same width, like on a typewriter. Most business sites show little or no code, so you can leave this font on its default.

Each card starts with one choice that decides where the font comes from. Its name differs from the card’s:

• the Headings font card starts with Display font;
• the Body text font card starts with Body font;
• the Accent font card starts with Accent / mono font.

Four ways to choose a font

Default The built-in font, already part of your site: Default (Cabinet Grotesk) for headings, Default (Plus Jakarta Sans) for body text and Default (the system monospace stack) for code. That last one is the code font already built into each visitor’s phone or computer. Nothing extra loads, so keep it until you want your own look. Curated pick A short list of fonts chosen to suit that slot, such as Fraunces · Bunny or Clash Display · Fontshare for headings. Choose one from the list, for example Display font — curated pick on the Headings font card. The right weights and backup style are set for you, so this is the quickest safe choice. CDN family by name Loads a font, by its name, from an online font library. Choose from any font in 2 free libraries, Bunny Fonts and Fontshare, typed by its name. On the Headings font card:

• In Display font — provider, choose Bunny Fonts (Google Fonts catalog) or Fontshare.
• Follow the link below it, fonts.bunny.net or fontshare.com, and find a font you like.
• Type its name in Display font — family name, spelled exactly as the library spells it, such as “Space Grotesk”.
• In Display font — weights, list the weights you want, such as “400, 700”. Leave it empty to load the usual ones.
• In Display font — fallback style, choose the style visitors see while your font loads:
  • Sans-serif: plain letters with no small strokes at their ends.
  • Serif: letters with small strokes at their ends, like a book.
  • Monospace: every letter the same width.

A font’s weight is how light or bold it is, written as a number from 100 (thinnest) to 900 (heaviest). 400 is normal text and 700 is bold. A font often comes in only some weights: its page on the font library lists the ones it has, so ask only for those. Uploaded font files Your own font files, such as a font you bought a license for. You add one file for each weight and style of the same font, up to 8.

1. Set Display font to Uploaded font files.
2. Open the Display font — font files list and choose Add Item.
3. In Font file, upload one file from your font download.
4. Choose its Weight and its Style (Normal or Italic). The file name usually tells you: “ParkerSans-Bold.woff2” is Bold (700) and Normal, and “ParkerSans-BoldItalic.woff2” is Bold (700) and Italic.
5. Repeat for each file you want, then choose Save in the list window to keep the list.
6. Set Display font — fallback style, as above, then choose Update to save everything.

Add at least one Normal file. Some downloads don’t match a weight and style like this, such as a single “variable” file. Then ask whoever sold you the font which file to use for each weight. Use .woff2 files where you can, because they’re the smallest. .woff, .ttf and .otf files work too. Make sure your font license allows use on a website. The other two cards work the same way. Their settings start with Body font and Accent / mono font instead.

Check it in the preview

The Live preview · Site typography shows a small sample page in your fonts: a heading, a ladder of weights, a paragraph and a line of code. The ladder shows the same words at each weight you asked for. It updates as you change things, before you save. Switch it between Dark and Light to see both themes. Type in Preview your own words to see your business name, such as “Parker’s Puppy Playland”, in your heading font. Each font shows a status:

• Built-in: the default font.
• Loaded: your font is working.
• Partly available: the font works, but it doesn’t include every weight you asked for.
• Not found: the library has no font by that name. Check the spelling.
• Not loaded: your uploaded font files couldn’t be loaded. Check that at least one file has Style set to Normal, and that each file is a .woff2, .woff, .ttf or .otf font file. Then remove the file and upload it again. If it still shows Not loaded, contact Fetchski Support.
• Using default: your choice can’t be used, so the built-in font shows instead. The reason appears beside it.

The weight ladder marks a weight the font doesn’t include as synthesized. Browsers fake those weights, and they look smeared, so remove them from the weights you listed.

Put your fonts live

Choose Update to save your fonts and put them live on your site. To save them without putting them live yet, open the arrow next to Update (More save options) and choose Save Draft. Your changes wait there; open the window again and choose Update when you’re ready to put them live.

Good to know

• Fewer weights load faster. Every weight is another download for your visitors. 400 and 700 cover body text, and 500 and 700 cover most headings.
• The header and footer always use your site fonts. Pages and sections can’t change them.
• Sections can use their own font. Any section, page or blog post can use a different font on its Fonts tab. See What every section shares.
• Your visitors’ privacy is protected. Bunny Fonts serves the whole Google Fonts collection without tracking your visitors. The CMS never loads fonts from Google directly.
• FetchskiAI can help. Ask the FetchskiAI Agent to suggest fonts. Admins and Owners can let it change them for you.

Related