Website Building » Shopify » How Do I Add Fonts to Shopify?

How Do I Add Fonts to Shopify?

Last updated on January 11, 2023 @ 6:55 pm

Adding fonts to Shopify is a simple process that can be accomplished in just a few steps. First, you need to find the font that you want to use.

There are a number of places to find free fonts online, such as Google Fonts. Once you’ve found the font you want, simply download it to your computer.

Next, open up the Shopify admin panel and go to Online Store > Themes. Find the theme you want to edit, and then click on Edit code.

In the Assets directory, click on Add a new asset. Choose the file type as “Font” and then upload the font file that you downloaded earlier.

Once the font file is uploaded, you need to edit your theme’s CSS file to tell Shopify to use the new font. To do this, go back to the Edit code page for your theme and find the Assets directory again. This time, click on theme.scss.liquid (or whichever file controls your theme’s CSS).

At the very top of the file, add the following line:

@font-face {
    font-family: 'Your Font Name';
    src: url('//cdn.Shopify.com/s/files/1/0002/5477/1206/files/Your-Font-Name.woff2') format('woff2'),
         url('//cdn.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Replace "Your Font Name" with the actual name of the font file that you uploaded earlier (without the extension). So, if your font file was called "myfont.woff2", you would replace "Your Font Name" with "myfont". Save your changes and you're done!

Now that you know how to add fonts to Shopify, let's take a look at how to style text using HTML tags.

PRO TIP: If you are not familiar with HTML and CSS, we recommend that you seek help from a web developer before adding fonts to your Shopify store. Adding fonts to your store can result in unexpected changes to your store's design, and can cause pages to load slowly if too many fonts are added.
Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.