How to add a custom font to your Shopify store?

This post will show you how to add custom font on Shopify. Be sure to follow the steps exactly to ensure success.

1. Download the Webfont version of your font. The font files must include at least the WOFF and WOFF2 file types, because TTF or OTF fonts are not Webfont file types or that fonts are not supported in Shopify many themes.

2. From your Shopify Admin go to Online Store > Themes.

3. Create a duplicate copy of your theme and next go the theme you want to edit click Actions > Edit Code.

4. In the sidebar choose Assets > theme.scss file. Maybe the name of the CSS file is different depending on the theme which you have used, so open the CSS file of your store.

5. Scroll to the bottom of the file and paste the following code…

@font-face {
    font-family: "Name of Font";
    src: url("Name-of-Font-File.woff2") format("woff2"),
    url("Name-of-Font-File.woff") format("woff");

Replace Name of Font with the name of your font and Name-of-Font-File with the exact name of the font file on your computer. It is case-sensitive with hyphens.

6. Below this code also paste the following code…

<p><span style="font-weight: 500;">Enter your selectors { font-family: "Name of Font" !important; }</span></p> 

7. Go to the Assets folder and click Add a new asset. Upload each version of the font file one by one.

8. Now that the font is installed, using code we need to tell the theme what headings or text will use our new font. In a new browser, tab go to your website and find the heading or text you want in this font, in this example it is a heading. Right-click on the words and select Inspect.

A window will pop up showing you the code of the site. Look in the CSS code that is styling your heading. Click on the property name and copy the text.

Go back to the browser tab with the theme code editor and open the theme.scss file again. Select the words that say “Enter your selectors” and paste what you have already copied. Then replace “Name of Font” with the name you used before.

Save your changes, refresh your website and have a look at your custom font.

Adding a custom font to your Shopify store has never been easier, so add it securely. If you get any trouble while changing the fonts or you need any help please leave your queries in the comment box. I am always eager to help you.