Typography

A guide to choose fonts for the website

Steps

  1. In the theme editor (Customize), click Theme settings.

  2. Locate Typography.

  3. Make necessary changes.

  4. Save.

Typography is considered one of the essential components that impact the website's look and feel. This article will show you how to edit your store typography.

In this article:

How to adjust fonts for body text and heading

How to adjust fonts for navigation

How to adjust fonts for buttons

Body text and Heading

You can choose between many existing fonts from the library. Selecting a different font can affect the speed of your store.

  • System fonts: fonts that are already installed on most computers.

  • Other fonts: fonts that may need downloading before being displayed

The font that displays on your customer's computer depends on their operating system.

Body text

Choose the font and adjust the font size scale for the body text of the site.

Headings

Choose the font, then adjust the font size scale and letter spacing of all headings.

To learn more about system font, see Shopify Manuals.

Mega title

Set the font size scale for extra-large headings (between 400-800%).

The settings for Mega title are available on ✨ Zest version 7.0.0 onwards. See our Changelog

Product cards title

To set the font size scale and font family for your Product card title.

Choose the font for your navigation as Body font/Headings font and enable/disable uppercase navigation.

Buttons

Choose the font for your button labels as Body font/Headings font and enable/disable the Uppercase label.

You can also adjust the height of the buttons and the corner radius.

Last updated