Add your own font (old theme versions)

If you are using a theme version before 1.1.5 this article is applying to your case:

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. 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  #General Variables and just before the fonts variables (screenshot), 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="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 (lines 77-80 - screenshot) .

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 .