How to Use Custom Fonts on Shopify

You’ve designed the perfect website that your client loves, but now you need to figure out how to use the brand fonts on Shopify. No, you don’t need to pay for a $10 app to install your fonts. Just follow the following steps.

How to Use Custom Fonts on Shopify

Step 1 – Import the Font

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 jump to Adobe Fonts, Google Fonts, or Custom Font Files on the Table of Contents above to get started. 

Adobe Fonts

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.

Google Fonts

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, 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.

Custom Font Files

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 > Settings > 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 Settings > 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.

@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 (as I once learned the hard way).

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 – Use the Font

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, most importantly your paragraph text.

body, p {
  font-family: forma-djr-deck, sans-serif;
  font-weight: 400;
  font-style: normal;
}

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. You can use the inspector to inspect heading elements and see which class they use. 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.

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .font-heading   {
  font-family: 'Steiner Premium RB', sans-serif;
  font-weight: 400;
  font-style: normal;
}

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.

h1 i, .h1 i, h2 i, .h2 i, h3 i, .h3 i {
    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:

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

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.
  • 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.

Wrapping Up

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.

Good luck and leave us a comment below if this was helpful!


If you found this helpful, you might like to check out our Shopify Store Launch Kit.

Hana Drdla

Hana Drdla

Hana is one of the co-founders of Luna and a Shopify pro. She loves helping entrepreneurs launch their businesses through her freelance web development business.

SHOPIFY TUTORIALS, STRAIGHT TO YOUR INBOX

Sign up to receive monthly emails packed full of tutorials, new products and special offers.

5 1 vote
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
mvee
mvee
5 months ago

THANK YOU SOO MUCH FOR YOUR BLOG! I went through 5 different blogs and 4 different videos before I discovered yours and yours was the only one that helped me! I really appreciate it.

Luna Templates
Luna Templates
5 months ago
Reply to  mvee

So glad that it was helpful!! 🙂

ELEVATE YOUR SHOPIFY STORE

With sections that work with the most popular themes. For store owners and designers.

We’re making beautiful Shopify stores a breeze with customizable pre-built sections.

Related Posts