How Do I Add A Custom Font To Shopify Theme?

Modified on Mon, 02 Mar 2020 at 11:01 PM

We often get asked if it is possible to add a custom font to the theme, the answer is yes! In more recent theme versions Shopify launched the Shopify Font Picker, which automatically give merchants access to a lot of fonts. However, sometimes you still need a custom font and currently it is not possible to add a font to the Shopify Font Picker, so we will add the font using code instead.

Step 1

Purchase the webfont version of your font. The font files must include at least the WOFF and WOFF2 file types (TTF or OTF are not a webfont file types).

Step 2

From your Shopify Admin go to Online Store > Themes > next to the theme you want to edit click Actions > Edit Code. In the sidebar choose Assets > themes.css.liquid (or styles.css.liquid). Scroll to the bottom of the file and paste the following code…

Replace NAME OF FONT with the name of your font and NAME OF THE FONT FILE with the exact name (casesensitve with hyphens) of the font file on your computer.

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

Below this code also paste the following code…

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

Step 3

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

Step 4

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 popup showing you the code of the site. Look in the right hand column for the CSS code that is styling your heading. In the example above you will see on the left, highlighted in grey, the heading is an <h2> and on the right the CSS property selector for the heading is .section-title.lines h2. Click the property name (circled above) and copy the text.

Go back to the browser tab with the theme code editor and open the stylesheet.css.liquid file again. Select the words that say "your CSS selector here" and paste what you have already copied. Then replace "NAME OF YOUR FONT" with the name you used before.

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