How To Add A Font To A Shopify Theme

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.

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

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.

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

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.

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.