Using Custom Web Fonts

Using Custom Web Fonts

Overview

Our themes use Shopify’s Font Picker, which gives you access to hundreds of premium and open source fonts. If you’d like to use a font that’s not available in the Font Picker, you can achieve this by making some edits to theme code.

This is a two-step process:

1. Loading the fonts
2. Applying the fonts

1. Loading the Fonts

Using a font service

If you’re using a font service like Adobe Fonts, Fonts.com, TypeNetwork, cloud.typography or Google Fonts, you’ll have a code snippet, something that looks like this:

<link rel="stylesheet" href="https://use.typeservice.net/a1b2c3d4.css">

Open the theme.liquid file in the code editor, paste the snippet on a line before the closing </head> tag, and move on to the next step in this guide.

Using web font files (.woff, .ttf, .eot, etc.)

Upload the files to the “Assets” folder of the theme: go to the code editor, navigate to Assets, and click “Add a new asset.” Using the “Upload file” tab, upload the font files one by one.

You may at this point be wondering if you really need all of these font files. You’ll find a good discussion of browsers’ web font requirements in this article.

Next, we need to pull the font files into the stylesheet with a @font-face declaration. If you decided to only upload .woff files, you would now add the following to the top of theme.scss.liquid:

@font-face {
  font-family: 'Font Name'; /* Font name - how you want to refer to it in this file. Can be anything. */
  src: url('{{ 'The-Exact-Name-of-the-File-You-Uploaded.woff' | asset_url }}') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Font Name'; /* Same as Above */
  src: url('{{ 'The-Exact-Name-of-the-File-You-Uploaded-Italic.woff' | asset_url }}') format('woff');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Font Name'; /* Same as Above */
  src: url('{{ 'The-Exact-Name-of-the-File-You-Uploaded-Bold.woff' | asset_url }}') format('woff');
  font-weight: bold;
  font-style: normal;
}

Now you have a font-family value that you can use in CSS rules.

2. Applying the Fonts

You can now change the font-family property of the selectors you wish to modify. The current versions of all our themes have font stack variables, which will affect multiple text elements on the site.

Here’s an example from Cascade:

If we wanted to change the headings to use Forma DJR Banner from Typekit, we would change line 230 to:

$heading-font-stack: "forma-djr-banner", {{ heading_font.family }}, {{ heading_font.fallback_families }};

Editorial and Label have similar variables, also near the top of theme.scss.liquid.

If you don’t want to apply the font to all the elements covered by the font stack, you can figure out the target element’s CSS class and add a custom rule to the theme.scss.liquid stylesheet. This tutorial might help.