Add your own fonts

If you want to add your own fonts in the theme you need to do a little bit of CSS tweaking. Start by uploading your new font into the assets folder of the theme. Make sure that you upload all proper formats, namely eot, woff, ttf & svg. These are all required for perfect browser compatibility.

After you've done this, open the theme's main stylesheet, /assets/css_main.scss.liquid file. Go at section "1.2. Variables" and just before the fonts variables, insert the new font face declaration of your new font. Here's an example:

@font-face {
  font-family: "MyFont";
  src: url('{{ "font_myfont.eot" | asset_url }}');
  src: url('{{ "font_myfont.eot" | asset_url }} ?#iefix') format("embedded-opentype"),
       url('{{ "font_myfont.woff" | asset_url }}') format("woff"),
       url('{{ "font_myfont.ttf" | asset_url }}') format("truetype"),
       url('{{ "font_myfont.svg" | asset_url }} #myfont') format("svg");
}

Add such declaration for all the fonts that you might want to include. Next, you have to change the font variables, from the settings value to your own value. Let's say what you want to use this new font as a headings font - you'll have to change the first variable into this one:

$headingsFont: 'MyFont', sans-serif;

This will make sure that your new font will be taken as the headings font, and of course, you need to provide a fallback, in our example it's sans-serif.