How to Add Custom Fonts to Shopify: Step-by-Step Guide
Using the Shopify Font Library
All stores have easy access to the Shopify font library. This library contains many free Google fonts and allows you to quickly assign heading and body font families straight from the theme editor. It's always worth checking if your font is available here first. To check what fonts are available, go to: Online Store > Customize > Theme settings > Typography, and select the Heading and Body font you want your website to use.
If your brand fonts aren't available here, then you can proceed to the below steps to use your custom font with your theme.
Step 1: Installing Custom Fonts on Shopify
Start by opening your theme code. Go to Themes → Actions → Edit Code.
This step is a little different depending on how you’re importing your fonts so scroll down to Adobe Fonts, Google Fonts, or Custom Font Files below to get started.
How to add Adobe Fonts to Shopify
Find the font you want to use on Adobe Fonts and click “Add to Web Project”. Type in a new project name or add to an existing project, then add all the font families and styles you want to use on the website to the project. Remember to only include the ones you will really use in order to minimize the website loading speed.
Once you’ve selected all your fonts, go to “Manage Fonts” → Web Projects. Here you’ll see the code you need to embed. It says “copy this code into the <head> of your html” .
Back to Shopify. Open the “theme.liquid” file located in the “Layout” folder of your Shopify theme. At the top of the file, between the <head> and </head> tags, you want to paste your font code from Adobe (the <link> code). I paste mine directly after the CSS files. If you don’t know there that is, add it immediately before the </head> tag.
Now you're ready for step 2.
How to add Google Fonts to Shopify
Shopify does include several Google fonts in their library so firstly, I’d recommend going to the font settings in the theme customizer and double checking that your desired font isn’t included in that list. It's preferred to use Shopify-hosted fonts as opposed to Google-hosted fonts. Check out this privacy dispute which ultimately recommends that you download Google fonts and upload them to Shopify, rather than using Google-hosted fonts. If you wish to do that, download the fonts from Google and skip to the next section, "Custom Font Files". If not, proceed.
Find the font you want to use on Google Fonts, and click “Select this style”. Do this for each font style that you need (both family and weight/style). On the top right, there is a button that opens a list of all your selected fonts. Here, Google makes it easy for you to copy the code to add to your theme. You’ll see that the code lists all the font families and weights that you’ve chosen.
The instructions say, “To embed a font, copy the code into the <head> of your html. To find the <head>, go to the “theme.liquid” file located in the “Layout” folder of your Shopify theme. At the top of the file, between the <head> and /<head> tags, you want to paste your font code from google (the <link> code). I paste mine after the CSS files. If you don’t know there that is, just make sure it’s added before the </head> tag.
The reason that we want to use the <link> code instead of the @import code from Google is because <link> preloads the font and allows your page to load faster. We all know the awkward flash of a different font showing before your custom font, while you hope that no one else noticed that.
Save this file and move on to step 2.
How to add Custom Font Files to Shopify
If you have font files rather than code to import the fonts, you’ll want to go into the Files section of the Shopify Admin. Go to Admin > Content > Files. There, click the "Upload files" green button and upload the following font file types for each family and style that you need: .woff2, .woff and .ttf / .otf. TTF and OTF files have the same browser support so you only need one of them.
If your font does not have web font files and the license permits it, use an online font converter like Transfonter to convert and download the web font files. Web fonts (.woff2 and .woff) are compressed and load faster, so do not skip this step. While .woff2 files are extra compressed, they're not widely supported across browsers which is why we also need .woff as a backup.
Note: This article previously said to upload fonts into the Assets folder of your theme. Recently (08/2022) this has been problematic for mobile browsers so I now prefer the Content > Files method. This method is also faster since you can upload files in bulk (rather than one by one like the Assets folder required) and if you ever switch themes, you don't need to re-upload them to the new theme!
Now you’ll need to import these fonts into your CSS file. Go to Online Store > Actions > Edit Code. I highly recommend creating a custom CSS file, but if you don't want to, search for "css" find the main CSS theme file. This might be named something like "theme.css" or "base.css". At the bottom of this file is where you will import your font.
Go to the folder on your computer where your fonts were originally downloaded and look for a .css file. “Fonts.css” for example. If you used Transfonter, it would have come with a fonts.css file as well. Copy and paste the code from this file into your Shopify CSS file. If you don’t have this code, you’ll have the use the code below as an example. For the font family name, make sure to use the exact name given by the source of the fonts (either what's created by Transfonter, or go to Google/Adobe fonts, and see the code they've given to use).
Now fill in the src url with the link from the Files section of the Shopify admin. For each file, click the little link icon to copy the URL and paste it into the appropriate line of the CSS. Once you've done it for all your fonts, click save.
The order of the fonts matters! The browser will load the fonts in order, and only proceed to the next one if the initial one did not work, so you want to list them in order of how quickly they will load. This means in the order of .woff2, .woff, .otf or .tff.
Note: If you are using the Assets folder to upload your fonts - which I mentioned above that I don't do anymore, make sure the source urls are the exact same as the file names. Even capitalization matters.
If you're uploading several font styles from the same font family (e.g. bold, regular, light, italic, etc.), you do need to import each one of them. They will all have the same font-family name but have different weights and styles. For example, you will have multiple "@font-face" imports with the same font family, but different source urls and the "font-weight" and "font-style" CSS properties will have different values.
Yes, this is a lot more time consuming than using Adobe or Google fonts but it must be done.
Once each font file has been added and imported, move to step 2.
Step 2: Using Custom Fonts on Shopify
Unfortunately, your custom fonts won’t appear in Shopify’s font list in the customizer so you’ll need to tell your theme how to use your fonts in the CSS code.
Go to Online Store > Actions > Edit Code. In your theme files, search for "css" and go to your Custom CSS file. Haven't created a custom.css file yet? Read Custom CSS File on Shopify: How to Create and Why You Need It first. This is where we'll add our code.
Use the browser's Inspector tool to inspect the different fonts on a page. Specifically the headings, paragraphs and buttons. You'll likely see that your theme is using CSS variables to assign font families like below. CSS variables look like var(--FONT-BODY) for example.
What we want to do is use the theme's existing CSS variables, but re-assign or overwrite what these variable values are equal to.
In your custom.css file, use the :root selector to add all the custom variables that already exist in your theme and that you'd like to redefine. Add your custom font family names like the example below (your variable names may not match mine shown — see the note below). Looking at the example below, what's happening is that the font family for the headings, body and buttons are being replaced with the ones that I've assigned. And I've changed the font weight of my headings and bold body font to match what's needed for my particular font.
*NOTE*: Every theme will use different variable names than the ones shown above. These are names that the theme developers have created, and you will be overwriting their values. To find the exact variable names your theme uses, you can use the Inspect tool, or go to your theme files, look for a file named css-variables.liquid or similar to that. Here you'll find a full list of CSS custom variables that are being used in your theme that you can redefine as needed.
Make sure to use the exact same font family name that Google, Adobe or your CSS file (depending on which you used in step 1) gives. To locate this code on Adobe, got to Manage Fonts > Web Projects > Edit Project, and click the little copy icon for the font that you've imported.
Pay very close attention to the formatting of the above. Look at the brackets and punctuation to make sure it matches exactly like the above.
If for some reason your theme does not use CSS variables to assign font families like above, then you will need to reassign each HTML element or class manually. You’ll want to decide what HTML elements or classes will use these fonts. You need to define where you want the font used, and provide a backup font.
Let’s start by adding the body font. This covers most text on the website:
Next, our headings. Of course we have to include h1, h2, h3... tags but you should also include any specific classes your theme uses for headings. I recommend using the browser's Inspector tool to inspect heading elements and see which selectors are being used to apply the font-family. Copy the selectors specific to your theme. See the examples below. Common classes are .h1, .h2, . h3, .font-heading. However, you will have to check your particular theme for what classes to use.
I want my italicized headings to use a lighter version of the font, so I’ll define that here with the correct font-weight and font-style.
Once you've defined these styles, check if it is working. If not, add "!important" to your CSS font-family like this:
You will notice some areas of your website that don’t adopt these fonts such as the add to cart buttons for example. If this happens, you’ll need to use the inspector to check the class name and add those to the CSS as well.
Troubleshooting Shopify Font Issues
If you’ve followed the instructions carefully and your font still isn’t showing, check the following:
- Are you using the correct CSS file? Test if the CSS is working by adding some obvious CSS like
body {color: red;}to the top of the file and see if it's showing on the page. If not, you may be in the wrong file. - Are there errors in your CSS? Look closely at the semi-colons and opening and closing brackets. Correct punctuation is crucial to making this work.
- When defining where you want the font used (Step 2), did you write the font name exactly as your font CSS file says to (the code copied from Google, Adobe, custom files or Transfonter)?
- Are you previewing the correct theme that you’ve been working on? The fonts will only work on the theme you’ve edited the code for.
Where to Find New Fonts for Your Shopify Store
If you're looking to use a more premium font in your branding, we recommend looking through the following websites for fonts:
- Adobe fonts (although these will require a subscription from you or your designer)
- Typewolf
- Fonts In Use
You should be good to go now! If you’re still having difficulty making the fonts appear the way you want, read very carefully through the article again and pay close attention to punctuation in the code.
If you found this helpful, you might like to check out our Shopify Store Launch Kit.
The Shopify Store Launch Kit
$97 USD
Hana Drdla
