Guides
Typography
Choose Propel's body, heading and eyebrow fonts from the Shopify font library, and see where each one appears on your storefront.
Propel's fonts are set in one place: Online Store > Themes > Customize > Theme settings > Typography. There are three font settings, one for each kind of text on the storefront.
Font settings
| Setting | Default | Where it shows |
|---|---|---|
| Body font | Manrope | Body text, product details, buttons, form fields, prices on product cards and the header menu links. |
| Heading font | Barlow Condensed | Headings, such as page titles, section headings and dropdown headings, the price on the product page, and your shop name in the header when you have no logo. |
| Eyebrow font | IBM Plex Mono | The small labels above headings and product codes, plus other short labels such as the header's icon labels. |
There are no separate text size settings. Sizes are built into the theme.
Choose a font
- Go to Online Store > Themes > Customize.
- Open Theme settings > Typography.
- Select Change under the font you want to replace.
- Pick a font from the list, then select Select.
- Select Save.
The list is the Shopify font library. It includes many web fonts and a set of system fonts. System fonts are already on your shoppers' devices, so they load instantly, but they look different from one device to another.
The weight you pick is the regular weight for that font. Where the font family has them, Propel also uses its heavier and italic styles, for example for bold text. If a family has no italic, the browser slants the regular style instead.
Tips for choosing fonts
- Heading font. Propel's layouts are designed around a condensed heading font. A wide font makes long headings wrap onto more lines.
- Body font. Pick a font that stays easy to read at small sizes, because it is used for product details and buttons.
- Eyebrow font. The default is a monospaced font, which keeps product codes and short labels evenly spaced. Keep these labels short.
- Languages. If your store sells in a language that uses a different alphabet, check that each font includes it. Where a font lacks a character, the browser shows a fallback font instead.
Arabic and other right-to-left text
On storefronts in Arabic, Persian or Urdu, Propel adjusts small labels so they read well:
- Labels that use the Eyebrow font switch to the Body font, because a monospaced Latin font has no Arabic letters.
- The extra letter spacing used on Latin labels is removed, because Arabic letters join together.
You don't need to change any setting for this.