Add your own font

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

1. Use the @font-face declaration (add your own font files)

Please start by uploading your new font into the assets folder of the theme ( screenshot ). The best font file format for compatibility with all browsers is the woff, or even better, woff2 format, if you don't care about. 

CHECK YOUR THEME VERSION !!
If your theme version is 2.5.0 or higher

Open /snippets/head-variables.liquid and right at the top, remove the first 13 lines of code:

{%- assign headings_font = settings.headings_font -%}
{%- assign body_font = settings.body_font -%}
{%- assign menus_font = settings.menus_font -%}

<link rel="preload" href="{{ headings_font | font_url }}" as="font" type="font/woff2" crossorigin>

{%- if body_font != headings_font -%}
  <link rel="preload" href="{{ body_font | font_url }}" as="font" type="font/woff2" crossorigin>
{%- endif -%}

{%- if menus_font != body_font and menus_font != headings_font -%}
  <link rel="preload" href="{{ menus_font | font_url }}" as="font" type="font/woff2" crossorigin>
{%- endif -%}

Now, go a bit further and identify the place where the current fonts are created, and delete those lines as well:

/* Fonts */

{{ headings_font | font_face: font_display: 'swap' }}

{{ body_font | font_face: font_display: 'swap' }}

{%- 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' -%}

{%- if body_font -%}
  {{ body_font_bold | font_face: font_display: 'swap' }}
{%- endif -%}

{%- if body_font_italic -%}
  {{ body_font_italic | font_face: font_display: 'swap' }}
{%- endif -%}

{%- if body_font_bold_italic -%}
  {{ body_font_bold_italic | font_face: font_display: 'swap' }}
{%- endif -%}

{{ menus_font | font_face: font_display: 'swap' }}

{%- assign menus_font_bold = menus_font | font_modify: 'weight', '600' -%}
{%- if menus_font_bold -%}
  {{ menus_font_bold | font_face: font_display: 'swap' }}
{%- else -%}
  {%- assign menus_font_bold = menus_font | font_modify: 'weight', 'bolder' -%}
  {{ menus_font_bold | font_face: font_display: 'swap' }}
{%- endif -%}

Instead of the code you just deleted, paste this one:

@font-face {
  font-family: "MyFont";
  src: url('{{ "MyFont.woff" | asset_url }}') format("woff");
}

Add this declaration for all the fonts that you wish to use (if you want to change two fonts, one for headings, one for body, you'll need to font declarations, with the names you declare. If your font has style variations (italic, bold), you need to add font files for those as well, like this:

@font-face {
  font-family: "MyFont";
  src: url('{{ "MyFont-regular.woff" | asset_url }}') format("woff");
}
@font-face {
  font-family: "MyFont";
  font-weight: 500;
  src: url('{{ "MyFont-medium.woff" | asset_url }}') format("woff");
}
@font-face {
  font-family: "MyFont";
  font-weight: 700;
  src: url('{{ "MyFont-bold.woff" | asset_url }}') format("woff");
}
@font-face {
  font-family: "MyFont";
  font-weight: 400;
  font-style: italic;
  src: url('{{ "MyFont-italic.woff" | asset_url }}') format("woff");
}

Now that your font is ready to be loaded, go a bit further down and identify the font variables:

/* Font variables */

--font-stack-headings: {{ headings_font.family }}, {{ headings_font.fallback_families }};
--font-weight-headings: {{ headings_font.weight }};
--font-style-headings: {{ headings_font.style }};

--font-stack-body: {{ body_font.family }}, {{ body_font.fallback_families }};
--font-weight-body: {{ body_font.weight }};
{%- if body_font_bold -%}
  --font-weight-body-bold: {{ body_font_bold.weight }}; 
{%- else -%}
  --font-weight-body-bold: 700;
{%- endif -%}
--font-style-body: {{ body_font.style }};

--font-stack-menu: {{ menus_font.family }}, {{ menus_font.fallback_families }};
--font-weight-menu: {{ menus_font.weight }};
{%- if menus_font_bold -%}
  --font-weight-menu-bold: {{ menus_font_bold.weight }}; 
{%- else -%}
  --font-weight-menu-bold: 600; 
{%- endif -%}
--font-style-menu: {{ menus_font.style }};

You'll have to hard code your own font stack here, like this:

/* Font variables */

--font-stack-headings: "MyFont", sans-serif;
--font-weight-headings: 400;
--font-style-headings: normal;

--font-stack-body: "MyFont", sans-serif;
--font-weight-body: 500;
--font-weight-body-bold: 700;
--font-style-body: normal;

--font-stack-menu: "MyFont", sans-serif;
--font-weight-menu: 400;
--font-weight-menu-bold: 500;
--font-style-menu: normal;

You can have three different fonts, or use the same font for all typography, just make sure that you add the source files properly for all the fonts that you wish to use.

CHECK YOUR THEME VERSION !!
If your theme version is 2.4.2 or lower

Open  /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.woff" | asset_url }}') format("woff");
}

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 go back at STEP 1, and based on your theme version, apply the steps in order for the theme to use your font. Just skip the "@font-face" declaration, but the rest is the same.. You will be using the selected font from Google instead. So in all above examples, where we've used "MyFont", here it will be "Poiret One".

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.