Skip to content

Typography

Fonts are set once for the whole site in Global settings > Typography, and every section uses them. Text sizes follow a fixed responsive scale; the one size you choose is a section’s heading size, set per section.

Each text role has a font and a weight. For defaults, see Global Settings.

RoleUsed for
Heading FontSection headings, titles and stat values
Body FontParagraphs and descriptions
Button FontButtons and calls to action, with Button Text Transform (None or Uppercase)
Eyebrow FontThe small line above a heading, with Eyebrow Text Transform (Uppercase or None)
Highlight FontWords wrapped in {curly braces} in a section heading, with Highlight Style (Normal or Italic) and Highlight Color (Inherit or Custom Color)

To highlight words, type the heading as We help you {grow faster}. The braces do not show on the page.

Weights offered for each role: 300 (Light), 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold) and 900 (Black). If a font does not include the weight you pick, the browser uses the nearest weight it has or simulates it.

Every font list has three groups:

  • System fonts: System Font (Default), Arial and Georgia. They load nothing, because they are already on the visitor’s device.
  • Built-in Google Fonts: Arvo, Cardo, Cormorant Garamond, Crimson Text, DM Sans, DM Serif Display, EB Garamond, Fanwood Text, Fjalla One, IBM Plex Sans, IBM Plex Serif, Inter, Josefin Sans, Karla, Lato, Libre Baskerville, Lora, Lustria, Manrope, Merriweather, Merriweather Sans, Montserrat, Open Sans, Oswald, Proza Libre, Quattrocento, Quattrocento Sans, Quicksand, Source Sans Pro, Source Serif 4, Spectral and Ubuntu. On the live site these load from Google Fonts’ servers.
  • Custom Fonts: fonts you have uploaded or installed, listed last.

Browse Font Presets, at the top of the Typography tab, opens Choose a Font Preset: 26 tested pairings. Select one and Apply Font Preset to set the heading, body, button and eyebrow fonts and their weights in one step. Then select Save Settings, or Preview across site to stage it (see Staging Global Settings Changes).

Use a custom font for a brand typeface that is not in the built-in list, or to serve a font from your own site rather than from Google.

To upload a font file:

  1. In the Typography tab, go to Custom Fonts > Upload Custom Font.
  2. Select a .woff2, .woff, .ttf or .otf file, up to 10MB. WOFF2 is the smallest and loads fastest; a file over 300KB uploads with a warning, because a large font delays headings and slows the page.
  3. The font is stored in your site’s uploads folder and appears under Manage Custom Fonts and in every font list. Its name comes from the file name.
  4. Choose it for a role, then save the settings.

To remove one, select the close button beside it under Manage Custom Fonts and confirm. The file is deleted. If it was the heading or body font, that role returns to the system font; save the settings to keep the change.

To install a Google Font on your own site, ask your AI assistant through the Promptless connector. It downloads the weights you name once and serves them from your site, so visitors make no request to Google. The installed font appears under Custom Fonts. Installing does not apply it; choose it for a role afterwards, or ask the assistant to. See Connector Tools.

There is no site-wide font size setting. Section headings step up with screen width, from 30px on phones to 52px on screens 1280px and wider, and other text follows a matching scale.

Every section type has a Heading Size control in its Layout tab for the section’s main heading:

OptionSize
DefaultThe responsive scale above, up to 52px. Right for most sections.
L60px.
XL72px, and 60px on screens narrower than 1024px. Use it where the heading is the main element and there is little other text.

Heading size changes only how big the heading looks. Its level (H1, H2) is unchanged, so a large H2 can appear bigger than the page’s H1 without affecting screen readers or search engines.

Stats sections also have a Stat Font Size control for the numbers.

  • A font looks different in the editor and on the site. The settings are not saved, or a caching plugin is serving an old stylesheet. Save, then clear the cache.
  • Uploaded font files are large. Convert them to WOFF2 and subset them to the characters you need; a large heading font delays the first view of the page.
  • Some fonts do not suit uppercase. Set Eyebrow Text Transform or Button Text Transform to None.