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.
From your Shopify dashboard, navigate the following steps:
Online Store → Themes
Theme Settings
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.
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
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.
Select a font for your subheadings on the homepage.
Select a case style for your Subheading.
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.
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.
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.
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.
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.
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.
Choose from a range of body text fonts, selected by our design team, to maximise readability.
This slider sets the text size for your announcement bar.
Bold text
This toggles between bold and non-bold text.
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.
Changes the size of the text inside the Add to cart buttons.
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.
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.
An example of maximum 72px:
Choose from normal, bold or italic.
Choose a value between 10px and 72px
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:
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:
