Using Custom Web Fonts

This article applies to the current version of Label, and older versions of Cascade and Editorial

Update Summer 2020: Please note that this article only applies to the current version of Label, and versions of Cascade prior to 1.4.2 and Editorial prior to 3.6.1.

If you’re using a newer version of Cascade and Editorial, please find the updated articles below:

Cascade 1.4.2 and newer

Editorial 3.6.1 and newer

Advanced

This is an advanced customization. It requires editing theme code and is not supported by Switch Themes or Shopify. We recommend hiring an expert if you’re not comfortable editing Liquid, HTML, CSS and Javascript. Always make backups before customizing the theme.

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.)

Note

Please make sure your font license allows embedding the fonts in a website and that your traffic is within the page view limits stated by your license. If in doubt, contact the vendor.

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.