Support

Looking to use a custom font on your website? We recommend choosing a Google Font, as they're free and load the fastest.  Attached is a quick demo on how to download a Google font to your computer.  Another option would be purchasing a licensed font (MyFonts.com is a great source).

Adding your own custom font will NOT make it available through the dropdown font selector in the Designer. You will need to call your custom font in the Code Editor and assign it to the elements you want to inherit your custom font.


Once you've found the font(s) you want to use, follow these few steps to add it into your site:


1. Use a Webfont Generator to convert your fonts.

Using a Webfont Generator such as Fontie or Font2Web, convert your font file into the following formats: TrueType (.TTF), OpenType (.OTF), .EOT, .WOFF, and .SVG.

2. Upload the font files to your theme via FTP. 

You can download Filezilla, a free FTP client HERE. 

Connect to your store via FTP and create a new 'fonts' directory within the theme you are wanting to modify and drag your font files into the new directory:

Note: Uploading fonts here will not automatically put the font into your dropdown list in the Designer. These next steps show you how to manually change the appearance of text within your site's HTML.

3. Add the font into your component.css file
Within your components folder, find the component.css file for the area your want to use the custom font. You will need to do this for each component.css that you're wanting to modify. In the below example I am adding the font Roboto Black (file named 'Roboto-Black').

@font-face {
      font-family: 'Roboto-Black'; 
      src: url("{{ 'fonts/Roboto-Black.eot' | asset_url }}");
      src: url("{{ 'fonts/Roboto-Black.eot' | asset_url }}?#iefix") format('embedded-opentype'),
         url("{{ 'fonts/Roboto-Black.woff' | asset_url }}") format('woff'),
         url("{{ 'fonts/Roboto-Black.svg' | asset_url }}#Roboto-Black") format('svg');
    font-weight: normal;
    font-style: normal;
}

.h1-roboto {
  font-family: 'Roboto-Black';
  font-size: 42px; 

}

4. Update your HTML with the new font class.

Find the HTML page which contains the text you are looking to change. In this example, I am changing the homepage header on my 'index.html' page. Since I've given my new font a class name (on line 11, above) called 'h1-roboto', I can use the following code around any text that needs this font:

Now that you've updated the places you want to use this font in your HTML, you'll be able to edit the text as-usual within the Design editor. Keep in mind that you will not see your new font within the dropdown.

Save your changes throughout.

Be sure to save your changes as you complete the steps, and view your store to ensure the changes are working.