The Fonts tab sets the fonts of your whole store and how heavy the text looks. You choose fonts once and every section follows.
Where to find it
Open the builder, click the gear icon, and open the Fonts tab. The tab has two parts: Fonts and Appearance.
The four fonts
- Body: paragraphs and most text, including form fields.
- Heading: large titles. Text set to Heading 1 or Heading 2 uses this font.
- Subheading: smaller titles. Text set to Heading 3 to Heading 6 uses it, and so do the item names in your menus.
- Accent: a fourth font for words you want to stand out, like a slogan or a short promo line. To use it, select a Text block and set its Font to Accent.
Click a font to open the picker. Type in Search fonts... to filter the list, then click a font to use it. The preview updates right away.
System fonts and non-system fonts
The picker shows two groups:
- System fonts: Helvetica, New York, SF Mono, and System UI. They are already on the shopper's device, so they load faster. They can look a little different from one device to another.
- Non-system fonts: Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Nunito, Merriweather, Playfair Display, Lora, PT Sans, PT Serif, Quicksand, Space Grotesk, DM Sans, Syne, Manrope, Outfit, Urbanist, Oswald, Bebas Neue, Abel, Abril Fatface, and Acme. They download to the shopper's device.
The builder warns: Using more than one non-system font might slow down your page load speed. A good setup is one non-system font for headings and a system font, or the same font, for body text.
Arabic text on your store gets a matching Arabic font automatically, so you can pick a Latin font without breaking Arabic pages.
Text weight
Under Appearance, Text weight makes all the text on your store lighter or heavier at once:
- Normal: the weights your theme was designed with.
- Medium: every text style one step heavier.
- Bold: heavier again.
Every style moves together, so headings stay heavier than body text. Some fonts have fewer weights, so the change can be small with those fonts.
Common tasks
- Make my store look more modern: try Inter, Manrope, or DM Sans for Body and Heading.
- Make it look more elegant: try Playfair Display or Lora for Heading, and keep a simple font for Body.
- Text is hard to read on phones: set Text weight to Medium.
- Change the size of one text: select that text in its section and change its size there. The Fonts tab only sets the font family and weight.
Good to know
- Fonts belong to the market you are editing. Switch market with the flag first if you sell in several markets.
- Changes go live when you click Publish.
- Corners, borders, and shadows come from your theme, not from this tab. See Store themes.