Add your own fonts

We put together these tutorials to help developers build off of Whisk and are happy to answer any questions related to their implementation, but we cannot be responsible for troubleshooting or fixing any issues that come up through custom code modifications made following these instructions. Always make any custom code edits off of a duplicate/draft version of the theme.

You can add your own fonts to your store without having to edit the code directly, which means that you can still upgrade your theme to new versions without losing your custom font! 🎉 Instructions follow.

Make sure you have the proper license for any custom font before you add it to your store.

1) Collect all the font files

In the past, different browsers supported different types of font files and so it was necessary to upload several different file versions of the same font. This is no longer the case, and a "woff" or "woff2" file is the only file you need for all modern browsers. You only need to upload one of these, so if you have both, I'd recommend the "woff2" as it's a newer format with better compression. We have tested other font formats like "ttf" or "otf" with these instructions and they don't always work, so make sure you use only "woff" or "woff2" font files.

There are three font styles offered in the Whisk theme: Body, Heading, and Accent. For all three, you will need two different font weights: 1 default weight (usually "regular" or "400"), and a "bold" or "700" weight. Unless you are uploading a variable font file that can hold more than one weight and style, these will be two separate font files. To add your own body font, you will need 2 more separate font files, an "italic" and a "bold italic". If you do not upload a bold or italic font files for body copy, anytime there is bold or italic text in your store, the browser will make up how it's supposed to look and this can often look bad.

2) Check to make sure your font files are valid

A corrupt font file is the biggest issue we see hear about when people are having trouble getting this to work, but it's hard to tell because the woff and woff2 font files don't display normally on computers. To test it's validity, upload the font to https://fontdrop.info/. If the font is valid, it will load quickly after uploaded and show you all of the different ligatures that the font offers. If after upload the loader continues to spin and nothing happens, that means there is something wrong with your font file.

3) Upload the font files to your store

In the Shopify Admin left hand sidebar, go to "Content/Files". Upload your font files by clicking the "Upload files" button.

Once your files are uploaded, click on the "link" button next to the file and save the link url for each file.

4) Add the font files to your theme.

We recommend that you duplicate your current theme and make all of these changes in a draft version of your theme so as to not affect your live store while you make edits, and in case anything goes wrong.

Inside the theme editor, go to "Theme settings/Theme style" and scroll down to find the "Custom CSS" section.

For each font file you have added, add this code block and replace the following areas with data related to your font file. Take note of which values are stored inside of quotes and which aren't.

FONT_FAMILY_NAME = The font family name without any style attached. Example: "Futura".

FONT_LINK_URL = The link url for the file that you copied from the upload in "Content/Files".

FONT_FILE_TYPE = The extension file type. Will most likely be "woff" or "woff2".

FONT_WEIGHT = The weight of the font file. We recommend you use a number for this value. Here are the numbers associated with every weight. If you are uploading a variable font file with more than one weight, separate each weight with a space, e.g. "400 700".

  • 100 Thin
  • 200 Extra Light
  • 300 Light
  • 400 Normal
  • 500 Medium
  • 600 Semi Bold
  • 700 Bold
  • 800 Extra Bold
  • 900 Ultra Bold

FONT_STYLE = either "normal" or "italic".

@font-face {
  font-family: "FONT_FAMILY_NAME";
  src: url("FONT_LINK_URL") format("FONT_FILE_TYPE"),
  font-weight: FONT_WEIGHT;
  font-style: FONT_STYLE;
  font-display: swap;
}

5) Declare your fonts within the available CSS Custom properties

The Whisk theme uses CSS Custom properties (aka CSS variables) which will update the font CSS values throughout your store if you update them at the root like the following example. Add this in the same Custom CSS section that you added the @font-face declarations, just underneath. We've added every custom property that is available in the theme, you can use only the ones that you need. Here's a little more detail about each

FONT_FAMILY_NAME = This needs to match exactly the FONT_FAMILY NAME in your @font-face declaration.

FONT_DEFAULT_WEIGHT = This is the number for the font weight and is the weight when the font style is not purposefully bold. For Heading or Accent styles, you can make the default a bold weight if you like.

FONT_STYLE = Only available for Heading or Accent styles. You can make this "italic" or "oblique" if you always want these font styles to be that way, or else this should be "normal".

:root {
  --font-body-family: "BODY_FONT_FAMILY_NAME";
  --font-body-weight: BODY_FONT_DEFAULT_WEIGHT;

  --font-heading-family: "HEADING_FONT_FAMILY_NAME";
  --font-heading-style: HEADING_FONT_STYLE;
  --font-heading-weight: HEADING_FONT_DEFAULT_WEIGHT;

  --font-accent-family: "ACCENT_FONT_FAMILY_NAME";
  --font-accent-style: ACCENT_FONT_STYLE;
  --font-accent-weight: ACCENT_FONT_DEFAULT_WEIGHT;
}

Voilà! Your custom font should be visible on your theme! It can also be used in the theme as the font style you declared it with, wherever there is an option to select a font style.

Here's a screencast where we add one font as an example: a regular weight custom font for headings.

For more examples of using CSS's font face, you can read this article: https://scalablecss.com/setup-custom-fonts-with-font-face/

Still need help? Contact Us Contact Us