Using Custom Web Fonts
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:
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:
- Loading the fonts
- 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.