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 add 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 “My Adobe 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 so firstly, I’d recommend going to the font settings in the theme customizer and double checking that your desired font isn’t included so you don’t waste your time. If it’s not there, 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 own, 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 scroll down to the Assets folder in your Shopify theme. There, you need to click “Add a new asset” and add each font file one by one. If you have the web font files, you’ll need to add each type. I add four file types: .eot, .ttf , .woff and .svg if I have them all available for each font style. 

If your font does not have web font files and the license permits it, use an online font converter like Font2Web to convert and download the web font files. Then add them all as instructed above.

Now you’ll need to import these fonts into your css file. In your theme files, search for “css” and in the list of files, choose theme.css.liquid, theme.css or custom.css if available with your theme. At the bottom of this file is where you will import your font.

In the font folder where your fonts are stored on your computer, look for a .css file. “Fonts.css” for example. If you used Font2Web, it would have come with a fonts.css file as well. Copy and paste the code from this file into your Shopify css file and click save. If you’re using the file from Font2Web, delete the “local(‘☺’),” text, and the “/fonts” text in each font type URL.  

If you don’t have this code, you’ll have the use the following as an example:

@font-face {
    font-family: 'Steiner Premium RB';
    src: url('steiner-premium-regular.eot');
    src: url('steiner-premium-regular.eot?#iefix') format('embedded-opentype'),
        url('steiner-premium-regular.woff') format('woff'),
        url('steiner-premium-regular.ttf') format('truetype');
        url('steiner-premium-regular#Steiner-Premium-RB') format('svg');
    font-weight: normal;
    font-style: normal;
}

Make sure the source urls are the exact same as the file names. Even capitalization matters (as I once learned the hard way after spending 40 minutes trying everything to make it work). Pay attention to the last part (.eot, .woff, .ttf). The font-family name can be formatted however you wish, but make sure to reference the exact same format when trying to use the font later on.

A tip if you’re uploading several font styles from the same font family… add them all with the same font-family name but specify their weights and styles. Then you can use the font using just one name as well. See the image below to see what I mean.

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. 

In your theme files, search for “css” and in the list of files, choose the main CSS or SCSS file to add to. This might be named “theme.css”, “theme.scss.liquid”, “base.css” or even “custom.css”. Every theme has a different way of naming this file, but it needs to be the file where the main CSS is. 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. You may also have to define the font size your font has irregular sizing and adjusting the settings from the customizer doesn’t work well for you.

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;
}

Next, our headings. Often in Shopify themes, heading classes are used to achieve a certain style so I included these in case.

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6   {
 font-family: 'Steiner Premium RB', sans-serif;
   text-transform: none;
}

I want my italicized headings to use a lighter version of the font, so I’ll define that here.

h1 i, .h1 i, h2 i, .h2 i, h3 i, .h3 i {
 font-family: 'Steiner Premium RI', serif;
}

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-family: 'Steiner Premium RB', sans-serif !important;
   text-transform: none;
}

Troubleshooting

If you’ve followed the instructions carefully and your font still isn’t showing, check the following:

  • When defining where you want the font used (Step 2), did you write the font name exactly as in Step 1?
  • 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.
  • Is your theme.liquid file importing the css file you are adding to? In one case, I noticed that any styles I added to the css file weren’t working. I checked the theme.liquid file and saw that only the styles.min.css file was being read. What I did was create a new “custom.css” file in the Assets folder, added all my custom code there, and and make sure to import this file into theme.liquid like so: {{ ‘custom.css | asset_url | stylesheet_tag }} .
  • 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. Make sure it is spelled exactly as its name in the font import.
  • One Shopify discussion suggests that the @font-face code must be in a css.liquid file, not a .css file. I have never had this be the case, but perhaps it’s true for some themes.  

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.

You might notice some areas of your website that don’t adopt these fonts such as the checkout 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.

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

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.

0 0 votes
Article Rating
Subscribe
Notify of
guest

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

0 Comments
Inline Feedbacks
View all comments

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