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 or the theme's main CSS file which might be named something like "theme.css" or "base.css" (you're already here if you've uploaded custom font files). Scroll all the way to the bottom of the file, and here’s where we’ll add our code.
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:
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.
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.
If you have used the Inspector, and you see that your theme is using CSS variables to assign font families like below, then it will be even easier for you to add your new font styles.
If your theme looks something like the above, you don't have to worry about which specific selectors or classes to use. You can simply use the CSS custom variables that your theme is already using, and reassign what the values are equal to.
At the top of 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).
*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: 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. If you cannot find them there, use the Inspect tool to find the names used.
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;}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.
- It should be working by now. But if not, find the css-variables.liquid or font-settings.css file. Where it says “assign heading_font” and “assign body_font” or something similar, add your font family name after the equals sign.
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)
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.
Hana Drdla
