How do I add a custom font?

Don't see your font as an option in the theme appearance settings? Follow this guide to learn how to add fonts from the "Google Library".

Note: You can use these same instructions for adding fonts to your product and landing page themes. If you are using a Premier theme, click here for the correct instructions!

For this example, we are going to be using the Lobster font, from Google Fonts library, to add to your website. Let's get started!

  • Ok so before we get started, let's examine the image below. You can see that our font list does not contain the Lobster font:

  • Now that we've seen the list of current fonts, let's go to our Website tab in our Admin Dashboard, then click Edit Code:

 

  • Once you go into your Edit Code, you'll need to find "settings_schema.json" under your Config folder. This is where we will add your desired font.
  • Scroll down in the settings_schema.json index and find the fonts.

  • Now, copy one of the listed fonts shown in this field. You'll need to copy the entire body of text between the "{" and "}," After copying one of the font fields, create an empty line below the one you've chosen. This will be where we paste the copied text for editing:

 

  • Paste the copied text in the open line as shown below. We'll be replacing the newly pasted font with our Lobster font for this example:

  • Now that we have a duplicate pasted under the copied code, we'll replace the name of the font with our desired font name. Again, we'll be using Lobster for this example, so go ahead type your font name in both the "label" & "value" lines. BE SURE TO CLICK SAVE AFTER MAKING THESE CHANGES:

  • After clicking Save, go back to your Customize section, and then click Typography. You'll now see that Lobster is a font option, and we can choose it, then click save. Once we click save, you'll see your new font be displayed on your site!

 

Note: This walkthrough does not apply to Premier Themes

Was this article helpful?