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 editor and double checking that your desired font isn’t included in that list. This would be the easiest way to add fonts.
To use other Google fonts, you should NOT use Google-hosted fonts (meaning do not use the font import code provided by Google). This is because Google-hosted fonts are not compliant with all privacy laws. Check out this privacy dispute for further details. If you do use Google-hosted fonts, Shopify will display a warning: 
If your chosen Google font is not made available in the theme editor options, then download the fonts family files in all the styles and weights needed to your computer and continue to the next step, "How to add Custom Font Files to Shopify".
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @font-face { | |
| font-family: 'Steiner Premium RB'; | |
| src: url('https://cdn.shopify.com/s/files/1/0915/4301/9308/files/steinerPremiumRB.woff2?v=16709345835') format('woff2'), | |
| url('https://cdn.shopify.com/s/files/1/0915/4301/9308/files/steinerPremiumRB.woff?v=16709345835') format('woff'), | |
| url('https://cdn.shopify.com/s/files/1/0915/4301/9308/files/steinerPremiumRB.ttf?v=16709345835') format('truetype'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --FONT-STACK-HEADING: 'Steiner Premium RB', sans-serif !important; | |
| --FONT-STACK-BODY: 'forma-djr-deck', sans-serif !important; | |
| --FONT-STACK-BUTTON: 'forma-djr-text', sans-serif !important; | |
| --FONT-WEIGHT-HEADING: 400; | |
| --FONT-WEIGHT-BODY-BOLD: 500; | |
| } |
*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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *, body, p { | |
| font-family: 'forma-djr-deck', sans-serif; | |
| font-weight: 400; | |
| font-style: normal; | |
| } |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| h1 em, .h1 em, h2 em, .h2 em, h3 em, .h3 em { | |
| font-family: 'Steiner Premium RI', serif; | |
| font-weight: 200; | |
| font-style: italic; | |
| } |
Once you've defined these styles, check if it is working. If not, add "!important" to your CSS font-family like this:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body, p { | |
| font-family: 'forma-djr-deck', sans-serif !important; | |
| font-weight: 400; | |
| font-style: normal; | |
| } | |
| h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .font-heading { | |
| font-family: 'Steiner Premium RB', sans-serif !important; | |
| text-transform: none; | |
| } |
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.
How to Make Fonts GDPR Compliant on Shopify
Recently we had an interesting question in our course community.
"I'm currently designing my first website for a client in Austria and was wondering if anyone knows whether it's necessary to use custom fonts in the EU-as platforms like Showit or WordPress require. I'm not sure if I can simply select a font like Poppins from the theme options, or if I need to custom code it to ensure GDPR compliance."
As we mentioned earlier in this article, Google-hosted fonts should NOT be used because the code is not compliant with privacy laws.
In Shopify's font library (accessible through the theme editor settings), they have many Google font options. These options are all hosted on Shopify, meaning that Shopify has already done the work of downloading the fonts and uploading them to Shopify to make them accessible to you, without worry of breaking privacy laws. Any font made available by Shopify is GDPR compliant. In the case that a Google font is not available in the Shopify font library, it should be downloaded and uploaded to the store files so that it is hosted on Shopify.
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
