Support Center

Custom Fonts

Last Updated: Jun 14, 2016 02:50PM PDT

If you'd like to add custom fonts to your site or products, you can do so by following a few simple steps. Please note, you can utilize these same instructions for adding fonts to your product as well by going to your Appearance tab in your Products page. For the sake of this example, we are going to be using the Lobster font, from Google Fonts' library, to add to your website. Let's get started!

 

1. 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. We'll be changing that with this tutorial. 

Image title

 

2. Now that we've seen the list of current fonts, let's go to our Website tab in our admin navigation dashboard. 

Image title

 

3. Once we are in your Website tab, we'll be in the Appearance section by default. From here, go to the More dropdown menu, then proceed to click Edit HTML/CSS. 

Image title

 

4. Once you go into your Edit HTML/CSS tab, you'll need to find "settings_schema.json" under your Config folder. This is where we will add your desired font. 

Image title

 

5. Scroll down in the settings_schema.json index and find the fonts. 

Image title

 

6. Now, copy one of the listed fonts shown in this field. You'll need to copy the entire body of text between the "{ },." 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.

Image title

 

7. 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. 

Image title

 

8. 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. 

Image title

 

9. 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! 

Image title

Contact Us

https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete