Add your own fonts (updated)

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. Please 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 (screenshot). 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 this original theme code:

// Headings font

{{ settings.typography_headings_new | font_face }}

{% assign headings_font = settings.typography_headings_new %}
$font-stack-header: {{ headings_font.family }}, {{ headings_font.fallback_families }};
$font-weight-header: {{ headings_font.weight }};
$font-style-header: {{ headings_font.style }};

@mixin font-head(){
  font-family: $font-stack-header;
  font-weight: $font-weight-header;
  font-style: $font-style-header;
}

$headingsFontBoldWeight: {{ headings_font.weight }};

{% assign headings_font_bold = headings_font | font_modify: 'weight', 'bolder' %}

{% if headings_font_bold %}
  {{ headings_font_bold | font_face }}
  $headingsFontBoldWeight: {{ headings_font_bold.weight }}; 
{% endif %}

with this new code where you need to insert your own values:

$font-stack-header: 'Georgia', serif;
$font-weight-header: 400;
$font-style-header: italic;

@mixin font-head(){
  font-family: $font-stack-header;
  font-weight: $font-weight-header;
  font-style: $font-style-header;
}

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 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 (screenshot). 

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

<link href="https://fonts.googleapis.com/css?family=Poiret+One" 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 the same way as for the @font-face declaration (please see last part from #1).

3. Use Typekit fonts

Please see this article that Shopify already have in their documentation for the Typekit font integration: https://help.shopify.com/themes/customization/store/use-typekit-fonts .