How to Add Custom Fonts

This article contains steps that will help implement custom fonts in your theme.

Let us take an example of the Gotham font

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

2. 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 > Palo Alto theme > Actions button > Edit code> Assets > 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 - */

3. 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 450:

$font-stack-body: {{ }}, {{ body_font.fallback_families }};
$font-stack-heading: {{ }}, {{ heading_font.fallback_families }};
$font-stack-button: {{ }}, {{ body_font.fallback_families }};
$font-stack-accent: {{ }}, {{ body_font.fallback_families }};

4. You'd need to change the code above with the code below for the general/body font for example:

$font-stack-body: 'Gotham', sans-serif;

5. Lastly, save the file.

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

Still need help? Contact Us Contact Us