Typography

Selecting a distinctive font on your site, in combination with a deliberate tone of voice provides added depth to your brand’s identity.

Your language and font choice help build up an image in the customer’s mind of the way you operate as a business.

We'll guide you through the Font options available within the Envy theme.

Getting Started

From your Shopify dashboard, navigate the following steps:

  1. Online Store → Themes

  2. Theme Settings

  3. Select Typography from the Menu.

Note:

If your looking to use your own custom fonts, not present with the theme - we have a great guide on Custom Fonts provided here.

Settings

Headings

This is the text that appears at the top of most sections on your storefront.

Font

Choose from a selection of serif, sans-serif, cursive and monospace fonts

Heading Case

Set the case of the Heading text. This styles how the font looks and can be set to Lowercase, Uppercase or Normal case (Sentences beginning with a capitalised letter).

Size

Set the size of the Heading font out of Small, Medium and Large.

Subheadings

Font

Select a font for your subheadings on the homepage.

Subheading case

Select a case style for your Subheading.

Body Text

Font

Choose from a range of body text fonts, selected by our design team, to maximise readability.

Note:

Changing this font will change the Blog post font, and any other font included in the Body that is not a header, or within an object.

Base size

This slider sets the size for the majority of text on your site. In some cases we use slightly smaller / larger text in sub-headings etc. but based on your font choice, you might want to increase or decrease the base size of the font.

These font options change the navigation menu text. This includes all menu items, as-well as submenu items.

Font

This dropdown selector chooses another Font setting to reference for its Navigation. This can be set to either Body or Subheading.

For example, if Body is selected, the font selected for the Body will replicate as the Navigation font.

Capitalize Navigation

Toggle to enable/disable uppercase letters for the Navigation.

Buttons

Font

Buttons can be referenced to either the Font of the Body, or Subheading's.

Capitalize Buttons

Enable/disable the checkbox to turn the Font to uppercase.

Older theme settings

As of Envy 26.0, we've simplified the typography settings inside the theme. If you are running an early version of Envy, setting descriptions for these options can be found below.

Announcement Bar

Versions pre Envy 26.0 will have the option to edit the Font for Announcement bars. Changes the text style displayed when the announcement bar is enabled.

Font

Choose from a range of body text fonts, selected by our design team, to maximise readability.

Base size

This slider sets the text size for your announcement bar.

Bold text

This toggles between bold and non-bold text.

‘Add to cart’ Buttons

Changes the text displayed inside the Add to Cart buttons. This is a unique settings and will only apply to the Add to Cart buttons. To change the more common buttons Font, see Button Case.

Size

Changes the size of the text inside the Add to cart buttons.

Button case

Text displayed inside of general buttons can be edited here. This includes buttons located inside of sections.

Note: Add to Cart buttons are not effected by these settings and have their own settings to edit the font and display. See 'Add to Cart' buttons in this documentation.

Uppercase:

Lowercase:

Normal case:

If you are using a font based logo, as opposed to a picture logo, you can set the size and style of the text here.

Size

An example of maximum 72px:

Style

Choose from normal, bold or italic.

Heading size

Choose a value between 10px and 72px

Text size

Choose a value between 10px and 32px

Tip

Remember, you can also change the colors in the 'color' section of your ‘general settings’.

More information can be found inside our informative guide:

Custom Fonts

Fonts can be uploaded to the assets folder and reference inside your themes CSS file. For a detailed guide on how to upload custom fonts, see our guide below:

For more information, Shopify also provides documentation on Fonts: