Typography

Change the fonts and styles for all typography on your site.

Overview

Having the right 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 helps build up an image in the customer’s mind of the way you operate as a business and go about fulfilling the needs of that customer.

A simple analogy is that your theme is your building’s architecture and your content (font, tone of voice etc.) is your choice of interior design.

In essence, your theme provides the sturdy framework and premium functionality and your site can then be dressed up even further, tailored perfectly to suit your niche market and target audience. We’ll show you how to make all adjustments to your font, in this guide.


How do I get started?

Firstly, head to:

  1. Admin
  2. Online Store > Themes
  3. Theme Settings
  4. Typography

Tip

For all fonts and styles, the best way to test these out is in the theme editor itself, allowing you to see changes live.


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.

Style:

This refers to the style of the headings throughout your site, and you can choose from.

Diagonal background sets the text to the left, and shows a diagonal background behind all headings:

Minimal centers the text, and adds a dotted underline to any heading text:

Full width linethrough centers the text, and has a full width line either side of the text.

Feature underline simply underlines the text itself:

Base size:

This slider sets the size for the text under your heading title:


Body Text

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

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.


Navigation

Base size

This changes your main navigation menu’s text size.

An example of 16px:

An example of 12px:

Menu case

Uppercase:

Lowercase:

Normal case:


‘Add to cart’ Buttons

Size

An example of the minimum 14px:

An example of maximum 20px:


Button case

Uppercase:

Lowercase:

Normal case:


Site Title (logo)

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.


Popup

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’. See our guide on your site’s popup here for more information: docs.wetheme.com/envy/popup


How do I use custom fonts on my site?

This can be done - here is a link which explains more:

help.shopify.com/themes/customization/fonts