One of the top questions shop owners have when they’re developing a Shopify store is whether they can add a new font to the store. While Shopify has lots of great fonts through their Shopify Font Picker, there are still going to be times when the theme/Shopify doesn’t have the right font for your store.

For this, you need to add the font to your Shopify theme files. Here is a list of steps that you must take in order to add a custom font to your Shopify store.

Key Takeaways
1
Open your Shopify admin panel and navigate to the ‘Themes’ section.
2
Choose the theme you want to edit and click on ‘Actions’ then ‘Edit code’.
3
In the ‘Assets’ directory, click ‘Add a new asset’ to upload your font files.

 

Step 1 - Purchase Your Webfont Version

The thing that you will need to do is to purchase the webfont version of the font that you want to use. The font files must include both WOFF and WOFF2 file types.

Step 2 - Log In

Now you need to log into your Shopify store with your user credentials.

Step 3 - Themes

From the Shopify Admin page, you need to select the ‘Online Store’ option then the ‘Themes’ option. Then you must find the theme that you want to edit and click on the ‘Actions’ and then ‘Edit Code’ option.

Within the side bar, you should see the option ‘Assets’ click on this and then find the stylesheet.css.liquid file. You need to open this for editing.

Step 4 - Add Code

Scroll down to the bottom of the stylesheet.css.liquid file and then paste in the follow code:

@font-face {
  font-family: “FONT NAME";
  src: url("FONT_NAME_FILE.woff2") format("woff2"),
       url("FONT_NAME_FILE .woff") format("woff");
}

You need to ensure that you replace the FONT NAME and FONT_NAME_FILE with the correct names used for your font that you want. Be sure to use the exact name, this is very case sensitive and you should ensure all the right hyphens are used.

You should also insert the following code to the file:

your css selector here { font-family: "NAME OF FONT" !important; }

Step 5 - Assets Folder

Now go to the ‘Assets’ folder and click on the option to ‘Add A New Asset’. You should upload the font files one at a time.

Step 6 - Using Your New Font

As soon as the new font has been installed, you need to select the headings/text that will use the font. For this you will need to open up a new browser tab and load up your website’s front end. As soon as this is done, find the heading/text that you want to have in the new font and the highlight the words and select the ‘Inspect’ option to see the coding for this text.

In the popup or the screen that displays the coding, look at the right hand column for the CSS code. You need to find the CSS property selector for the text/heading, for instance, it could be .section-title.lines h2. Copy the property name.

Then you go back to your theme code editor and re-open the stylesheet.css.liquid file. Find the part of the code that you added earlier that read:

your css selector here { font-family: "NAME OF FONT" !important; }

And replace the your css selector here with the property name you copied before. Once done, save the changes and fresh the website.