(V5) How to use custom fonts and Google Fonts? Print

  • font
  • 0

With font settings, you’ll be able to customize the fonts for nearly all of your online store.

 

Important: You might have specific fonts, font colours, font weight (bold), and/or font sizes set up for some of your typed text (in text editors), e.g., you have a product description that has its own font style. That text will not have the different styles that you choose on the Font page applied to it as the text editor will override what is set up on the Font page. The same occurs when you use the Live Visual Editor or custom CSS to add your own font styles.

 

First, log in to your admin area and navigate to Design > Theme Settings > Font.

 

Enabling Font Customization

To allow custom fonts to be controlled by the settings on this page, select ‘Yes’ next to ‘Enable Font Customization’.

Types of areas these font settings can affect:

  1. Body - This is the one that affects the most texts on your website. It affects normal text such as your product and category descriptions, page information text, footer menus, some subtitles, and so on.
  2. H1 Heading - Affects H1 headings, which are the titles of pages that tell your visitors on what page they are. For example, your contact page has a large "Contact us" text right below your top menu - Your product page has a large product name below your top menu. Quick tip: What you see below the heading is called the breadcrumbs area and that includes a home icon, a greater than symbol ">", and a page title.
  3. Block Heading - Affects the headings (titles) of your blocks such as the "Popular Products" and "New Arrivals" headings, among others. Quick tip: Blocks are types of widgets that feature lots of different types of information and can be positioned nearly anywhere.
  4. Top Bar - Affects the text found on the top bar, which is the horizontal bar above the top menu.
  5. Custom - What you choose here can be used in 2 ways:
    1. Selecting a font here along with adding a selector(s) will affect that text that the selector(s) is targeting.
    2. Adding a Google font in Custom Font Settings lets you to use that font anywhere on your site. What it does is it calls that Google font so that it can be used and the way to use that is in a text editor or via CSS code. For example, you want to add Aguafina Script (a Google font) to one paragraph only. You can add it as a Google font in Custom Font Settings and then use it in that text editor, in Source (Code View), by adding this code to that paragraph inside of the <p> tag, like this:
      <p style="font-family: 'Aguafina Script';">Your text here</p>

      You can add it anywhere, including in other tags like <h2></h2>, <span></span>, among all others.
      If you're adding a one word font, like Abel, then you don't need the apostrophes, like this: <p style="font-family: Abel;">Your text here</p>

      You can add multiple fonts at once in the Google Fonts pop-up. The system will add them all and you can then make use of them.

 

Font Settings

There are 2 Font Settings available:

  1. Standard - Lets you use the default web safe fonts.
  2. Google Fonts - Lets you select a font or more from a huge list of Google Fonts. This setting uses the Google Fonts system, allowing your visitors to see these fonts without having them installed on their computer.

If you keep Font Settings as Standard, you can manage fonts using the Normal Font dropdown. However, Standard may not offer much.

To access hundreds of fonts:

  1. Choose 'Google Fonts' from the dropdown menu.
  2. Click on the ‘Select Google Fonts’ button. A pop-up appears.
  3. Select your font(s) and, if you want to add weight (bold) or italic (if that font supports any of those), the font styles. You can use the filters above to find the font and styles that you want.
  4. Click Add. Choose to add other fonts or continue with the next step. If you add other fonts, the most recently added one, the one ordered at the bottom of the list, will be the one used.
  5. Click Submit.
  6. Save. Your font(s) can now be used.

 

Note: Your chosen formatting (fonts and such) using the text editor in pages, products, categories, blog posts, and other types of pages may overwrite your customized fonts that you chose in Theme Settings > Font. The same goes for the Live Visual Editor or custom CSS fonts.

You can also add your own custom CSS to change font sizes, colours, and much more, or use the Visual Editor in Customization.


Was this answer helpful?

« Back