How to add Custom Fonts

This documentation post contains steps that will help you implement custom fonts in your theme. Please note that the following tutorial is for version 1.9.2 of our Modular theme and older.

Let us take an example of the Gotham font


1

Uploading the Font Files

We first need to upload the fonts (the following font files: .ttf, .eot, .woff, .woff2) to the Asset's folder. Go to the Actions Edit Code and locate the Asset folder as shown below.

2

Modifying the theme.scss.liquid File

We will need to tell the theme CSS where to find the font files you've uploaded (it's not enough to just have them in the asset folder). Once you upload Gotham font, you'd need to add the following code to the end of your  theme.scss.liquid file.

Go to   Online Store > Themes >  Modular theme > Actions Edit codeAssets > theme.css.liquid file

/* -- code to use Gotham font-family in theme -- */
 @font-face {   
    font-family: 'Gotham';  
          src: 	url('{{ "Gotham-Bold.eot" | asset_url }}');   
          src: 	url('{{ "Gotham-Bold.eot" | asset_url }}#iefix') format("embedded-opentype"),
        	url('{{ "GothamBold.woff" | asset_url }}') format("woff"),
        	url('{{ "GothamBold.woff2" | asset_url }}') format("woff2"),
         	url('{{ "GothamBold.svg" | asset_url }}#GothamBold') format("svg");
         font-weight: bold;
         font-style: normal;
 } /* - end - */

Before:

After:

3

Locating the Font Settings

On the same file, depending on where you'd like to use the font to replace the theme's default settings (settings to change the heading font, body font, and button font), you'll need to locate the CSS codes shown below around line 148:
$general_font: {{ general_font.family }}, {{ general_font.fallback_families }};
$header_font: {{ header_font.family }}, {{ header_font.fallback_families }};
$button_font: {{ button_font.family }}, {{ button_font.fallback_families }};

You can use CTRL + F or Command + F to locate this part of the code as it's exact location may vary depending on the exact version of the theme.

4

Altering the Font Settings

You need to change the code above with the code below for the  general/body font for example:
$general_font: 'Gotham';


For version 1.9.3 and above of our Modular theme, you will need to follow these steps

1

Upload your Font Files

The first step is exactly the same as the previous. You need to upload the fonts (the following font files: .ttf, .eot, .woff, .woff2) to the Asset's folder. Go to the Actions > Edit Code> Locate the  Asset folder as shown below.

2

Locating your "css-variables.liquid" file

We will need to tell the theme CSS where to find the font files you've uploaded (it's not enough to just have them in the asset folder). Once you upload Gotham font, you'd need to add the following code to the end of your " css-variables.liquid" file.

Go to   Online store > Themes >  Modular theme > Actions Edit code > Snippetscss-variables.liquid file.

3

Defining the Font Family in the File

Once you have located the " css-variables.liquid" file you will need to scroll to the bottom of it and add this code snippet BEFORE the closing style tag - </style> or {% endstyle %}
/* -- code to use Gotham font-family in theme -- */
 @font-face {   
    font-family: 'Gotham';  
          src: 	url('{{ "Gotham-Bold.eot" | asset_url }}');   
          src: 	url('{{ "Gotham-Bold.eot" | asset_url }}#iefix') format("embedded-opentype"),
        	url('{{ "GothamBold.woff" | asset_url }}') format("woff"),
        	url('{{ "GothamBold.woff2" | asset_url }}') format("woff2"),
         	url('{{ "GothamBold.svg" | asset_url }}#GothamBold') format("svg");
         font-weight: bold;
         font-style: normal;
 } /* - end - */

4

Edit the Font Settings

Once the font files are uploaded and the snippet is added, we need to assign the new font. In the same file, scroll up to where you will find this part of the code:
 --body-font-family: {{ base_font.family }}, {{ base_font.fallback_families }};
 --heading-font-family: {{ heading_font.family }}, {{ heading_font.fallback_families }};

You can use CTRL + F or Command + F to find this part of the code. Once you have located it, simply replace the code with the curly brackets in favor of your new font name like so:

Adding custom fonts to themes can be a little tricky, depending on the font files you're working with.