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('{{ "MyFont.eot" | asset_url }}');
  src: url('{{ "MyFont.eot" | asset_url }} ?#iefix') format("embedded-opentype"),
       url('{{ "MyFont.woff" | asset_url }}') format("woff"),
       url('{{ "MyFont.ttf" | asset_url }}') format("truetype"),
       url('{{ "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. 

Headings fonts:

Please search for this block of code and remove it completely!!

// 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;
}

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

$font-stack-header: 'MyFont', serif;
$font-weight-header: 500;
$font-style-header: normal;

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

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.

Body fonts:

The code that needs to be removed is:

// Body (main)


{% assign body_font = settings.typography_body_new %}
{{ body_font | font_face }}


$font-stack-body: {{ body_font.family }}, {{ body_font.fallback_families }};
$font-weight-body: {{ body_font.weight }};
$font-style-body: {{ body_font.style }};


{%- assign body_font_bold = body_font | font_modify: 'weight', 'bolder' -%}
{%- assign body_font_italic = body_font | font_modify: 'style', 'italic' -%}
{%- assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic' -%}


$bodyFontBoldWeight: 700;
{%- if body_font_bold -%}
  {{ body_font_bold | font_face }}
  $bodyFontBoldWeight: {{ body_font_bold.weight }}; 
{%- endif -%}


{%- if body_font_italic -%}
  {{ body_font_italic | font_face }}
{% endif %}


{%- if body_font_bold_italic -%}
  {{ body_font_bold_italic | font_face }}
{%- endif -%}


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

And the replacement code is:

$font-stack-body: 'MyFont', serif;
$font-weight-body: 300;
$font-style-body: normal;

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

$bodyFontSemiboldWeight: 400;
$bodyFontBoldWeight: 700;

Menus and logo text font:

The original code that needs to be deleted is:

// Logo & menus


{% assign menu_font = settings.typography_menus_new %}
{{ menu_font | font_face }}


$font-stack-menu: {{ menu_font.family }}, {{ menu_font.fallback_families }};
$font-weight-menu: {{ menu_font.weight }};
$font-style-menu: {{ menu_font.style }};


$menuFontRegularWeight: {{ menu_font.weight }};


{% assign menu_font_bold = menu_font | font_modify: 'weight', '600' %}


$menuFontBoldWeight: 600;
{% if menu_font_bold %}
  {{ menu_font_bold | font_face }}
{% else -%}
  {% assign menu_font_bold = menu_font | font_modify: 'weight', 'bolder' %}
  {{ menu_font_bold | font_face }}
{% endif %}
{% if menu_font_bold %}
  $menuFontBoldWeight: {{ menu_font_bold.weight }}; 
{% endif %}


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

The new code with your own font name value (don't forget to replace 'MyFont' with your own font name in this code):

$font-stack-menu: 'MyFont', serif;
$font-weight-menu: 300;
$font-style-menu: normal;

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

$menuFontRegularWeight: 300;
$menuFontBoldWeight: 700;

For the quote font:

The original code:

// Special

{{ settings.typography_quote_new | font_face }}

{% assign quote_font = settings.typography_quote_new %}
$font-stack-quote: {{ quote_font.family }}, {{ quote_font.fallback_families }};
$font-weight-quote: {{ quote_font.weight }};
$font-style-quote: {{ quote_font.style }};

$quoteFontRegularStyle: {{ quote_font.style }};
{% if quote_font.style == 'italic' %}
  {%- assign quote_font_normal = quote_font | font_modify: 'style', 'normal' -%}
  {{ quote_font_normal | font_face }}
  $quoteFontRegularStyle: normal;
{% endif %}

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

The new code:

$font-stack-quote: 'MyFont', serif;
$font-weight-quote: 300;
$font-style-quote: italic;

@mixin font-quote(){
  font-family: $font-stack-quote;
  font-weight: $font-weight-quote;
  font-style: $font-style-quote;
}
$quoteFontRegularStyle: 300;

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 - please see #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 .