In this article
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:
- Online Store > Themes
- Theme Settings
For all fonts and styles, the best way to test these out is in the theme editor itself, allowing you to see changes live.
You will see you have the following options:
This is the text that appears at the top of most sections on your storefront.
Choose from a selection of serif, sans-serif, cursive and monospace fonts.
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:
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.
Base size -
This changes your main navigation menu’s text size.
An example of 16px:
An example of 12px:
Menu case -
Enable menu border -
‘Add to cart’ Buttons
An example of the minimum 14px:
An example of maximum 20px:
Button 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.
An example of the minimum 10px:
An example of maximum 72px:
Choose from normal, bold or italic.
See our guide on your site’s logo here for more information: http://docs.wetheme.com/envy/header/#logo
Heading size - Choose a value between 10px and 72px
Text size - Choose a value between 10px and 32px
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: http://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:
These are the most common methods of implementing custom fonts: