How to Add a Custom Font to Shopify

You can find a more recent tutorial on my Luna Templates article

You don't need an app to add a custom font to Shopify. Let me walk you through the steps of adding font files and using Adobe fonts in your Shopify project.

In this article, we will:

• Add the font files to our theme

• Import these fonts into our CSS styles

• Define how we want these fonts used

Custom Fonts on Shopify

Step 1: Add the font

If you have the web font files, you want to go to the Files section of your store. Go to Online Store → 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.

While you may find other instructions that tell you to add the font files to the theme files rather than the store files, I have recently found this to cause problems for the fonts to display properly on Safari on mobile. An added bonus of adding files to the Store files is that you don’t need to add them again when switching between themes.

Step 2: Import font to styles

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.

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.

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.

Step 3: Define font usage

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

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.

I hope that was easy enough! Keep in mind that you may have to adjust some of the CSS class names such as the selector .font-heading depending on your theme.