Typography

Overview

In your Typography settings, you can change the font, size, capitalization, and format of your storefront's text.

If you would like to instead learn how to add custom fonts which are external to the theme, please click here to read our guide.

Steps

  1. Within your Shopify admin, go to Sales Channels > Online Store > Themes.

  2. Click your theme, and select Customize.

  3. On the left-hand menu, select Theme settings.

  4. Scroll down to select Typography.

Theme settings > Typography

Heading Fonts

Your headings are the text that appears at the top of most sections on your storefront.

To choose a new font, go to Headings > Font, and then select Change.

Selecting a new heading font.

Heading Case

Use the Heading case drop-down menu to change your heading to:

  • Normal case

  • Lowercase

  • Uppercase

Normal Case

Heading: Normal case

Lowercase

Heading: Lowercase

Uppercase

Heading: Uppercase

Heading Size

Use the Size drop-down menu to make your heading:

  • Small

  • Medium

  • Large

Small

Heading size: Small

Medium

Heading size: Medium

Large

Heading size: Large

Subheading Font

Your subheadings are the text that appears above your headings on a smaller scale.

To choose a new font, go to Subheadings > Font, and then select Change.

Changing the subheading font.

Subheading Case

Use the Subheading case drop-down menu to change your subheading to:

  • Normal case

  • Lowercase

  • Uppercase

Normal case

Subheading: Normal case

Lowercase

Subheading: Lowercase

Uppercase

Subheading: Uppercase

Body Text Font

Your Body text is the main text which appears beneath your headings, making up the bulk of your storefront's copy and your Blog posts.

To choose a new font, go to Headings > Font, and then select Change.

Choosing a new body text font.

Base Size

Use the Base size slider to increase or decrease the size of your Body text.

Using the slider to make the body text larger or smaller.

Navigation Font

By using the Font drop-down menu, you can choose for your navigation section to display the same font that you had configured for either your Body or Subheading settings.

Body

Navigation font: Body text.

Subheading

Navigation font: Subheading.

Capitalize Navigation

You can also opt to Capitalize navigation by selecting the checkbox.

Capitalize navigation checkbox.
Navigation font: Capitalized.

Buttons Font

By using the Font drop-down menu, you can choose for your buttons to display the same font that you had configured for either your Body or Subheading settings.

Body

Buttons font: Body

Subheading

Buttons font: Subheading

Capitalize Buttons

You can also opt to Capitalize buttons by selecting the checkbox.

Buttons font: Capitalized

Custom Fonts

Fonts can be uploaded to the Assets folder and referenced inside your themes' CSS file.

For a detailed guide on how to upload custom fonts, please see our guide below: