Add your own font (updated)

Split theme includes different fonts that can be selected  from the Theme Customizer > General > Typography (screenshot). If you decide to use a custom font, there are a few methods to do this:

1. Use the @font-face declaration

This will require a little bit of CSS tweaking. Please start by uploading your new font into the assets folder of the theme (screenshot). 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  #Fonts  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 values 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 font original font-family value in this code with your own font name:

// Headings

{{ settings.typography_headings_new | font_face }}

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

@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.

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, menus, etc the same way as for the @font-face.

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 .