Add Custom Font Files To Shopify

Most Shopify themes offer a huge variety of fonts. You can also add fonts from TypeKit (instructions) or Google Fonts (instructions). But there are some cases  where you want to use custom fonts from a file in Shopify. For example, your company might have it’s own font or you may have purchased a commercial font. Below are instructions for installing the fonts into your theme. If you’re fluent in HTML, CSS, and Liquid, you can see the advanced version of these instructions on Shopify’s tutorials.

 

Step 1: Open The Theme Editor

Launch the theme editor by clicking this link or clicking Online Store > Theme in your admin panel. Click the dot icon and select “Edit HTML/CSS”:

Step 2: Upload The Font Files

Most font files come in .otf or .ttf files. Your font may have a different format, but make sure your write down the font format(s) that you’re uploading so we can reference them later. For example, if the font file is called helvetiva.otf, the font format is otf.

Under the “Assets” folder click “Add a new asset”

Click the first tab on the dialog that pops up, click “Choose File”, and select your font file.

If your font has multiple files, you will have to repeat this process for each one.

Step 3: Link The Fonts In Your CSS

Open your theme’s CSS file. In most themes, this is called theme.scss.liquid. Create a big space at the top of the file so you can work without clutter:

For each file you uploaded, add a copy of the code below, replacing the bold words with the ones that match your font.

FONTNAME: the name of the font. It doesn’t have to match the name of the font file – you can use any name you want.

FILENAME + FONTFORMAT: the name of the file that you uploaded, including the format. For example, helvetica.otf would be helvetiva.otf.

BOLDNESS: optional – if your font comes with multiple font weights, include a @font-face entry for each weight. If your font came with files like Fontname-Bold, Fontname-Light, you likely don’t need to set the font-weight. Remove this line if you don’t need it.

@font-face {
    font-family: FONTNAME;
    src: url(./FILENAME.FONTFORMAT);
    font-weight:BOLDNESS;
}

Here is an example using the NeutraFace font. Files are on the left, code is on the right:

 

Step 4: Apply The Font

This is the hardest part. If you don’t know CSS I would advise finding someone who can make this change for you (we will do this free!). First check if your theme using SCSS by clicking on the theme.scss.liquid code and hitting Control+F (Windows) or Command+F(Mac) to open the find bar. Search “$”:

If you see a bunch of results that look like this (with the $ as the first character in the line):

$viewportIncrement: 1px;

$small: 480px;
$medium: 768px;
$large: 769px;

$postSmall: $small + $viewportIncrement;
$preMedium: $medium - $viewportIncrement;
$preLarge: $large - $viewportIncrement;

you are using SCSS. Otherwise you are not. Follow the relative instructions below:

If your font DOES USE SCSS:

The $ indicates a variable, which means it sets a value in the code that can be reused over and over in the code. This means you can set it to your font once and it will change your entire theme! This is where it gets hard – you want to change the right value. For example, my theme (Supply from Shopify) has this set of variables:

// Header Font
$headerFontStack: {{ header_family }};
$headerFontWeight: {{ header_weight }};

// Body Font
$bodyFontStack: {{ base_family }};
$baseFontSize: {{ settings.type_base_size }};

// Navigation and Button Font
$accentFontStackBold: {{ accent_family }};
$accentFontWeight: {{ accent_weight }};

I want to change the header values to one font, and the body to another, so I changed it to this:

// Header Font
$headerFontStack: 'NeutraFace Display';
$headerFontWeight: {{ header_weight }};

// Body Font
$bodyFontStack: 'NeutraFace Text Book';
$baseFontSize: {{ settings.type_base_size }};

// Navigation and Button Font
$accentFontStackBold: {{ accent_family }};
$accentFontWeight: {{ accent_weight }};

You should have similar variables in your code, but you will need to find them.

If your font DOES NOT USE SCSS:

Your theme’s font choices will be spread across the theme file, so you will need to use the Find searchbar to find all instances of it. Search “font-family” and add  your font name to each setting (the rest will act as a fallback if your font fails to load). For example, if it says

font-family: Helvetica, Arial, Times New Roman;

You want to replace it with something like :

font-family: NeutraFace Display Light, Helvetica, Arial, Times New Roman;

 

Hit save and you should see your font updated on the theme! You can also hit “Preview” on the top right if you want to preview a different theme on your store without setting it as “active”.

Did this tutorial help you? Make you more confused? Feel free to leave your comments below!

2 thoughts on “Add Custom Font Files To Shopify

  1. THANK YOU SO SO SO SO SO MUCH!!!! I had been having trouble importing fonts (of type .otf) and was writing the src(‘name of font’) instead of the path like you show in the screenshots!!!! Literally had been stuck for 2 weeks with that.

Leave a Reply

Your email address will not be published. Required fields are marked *