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. 

1. Use the @font-face declaration

Start by uploading your new font into the assets folder of the theme. Pleaseake 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.

2. Use Google Fonts

After you select the font you need to use from Google fonts, a code will be generated for you to insert in the theme ( screenshot). 

Please embed the generated code in the theme.liquid file, just before the </head> closing tag (line 41-screenshot ). 

For example, for the Poiret One font the code generated by Google is:

<link href="" rel="stylesheet">

Then in  assets/css_main.scss.liquid file, insert the new font name where you need it to display: headers, menu, body or quote texts (lines 87-90 - screenshot) .

3. Use Typekit fonts

Please see this article that Shopify already have in their documentation for the Typekit font integration: .