How to add a custom font to your Shopify store?

Shopify offers a wide variety of fonts to choose from in its font library, but sometimes, you may need to upload a custom font to better match your brand and storefront. In this guide, we’ll show you the easiest way to upload a custom font to your Shopify store.

Convert the font to the correct format

Before you can add the custom font to your Shopify store, you need to convert it to the correct font format. In this guide, we will use the .woff. and .woff2 formats (read more about other font formats on W3schools), which are commonly used for web fonts. If your font is not in these formats, you can use an online font converter such as CloudConvert to convert it.

Upload the font files to Shopify

After you’ve converted your font and saved the font files to your computer, it’s time to upload them to Shopify. To do this, follow these steps:

1. Log in to your Shopify admin
2. Go to “Content” and then select “Files”
3. Upload the .woff and .woff2 font files to the files section.
4. Keep the window open so that you can easily copy the font file links.

Create a @font-face CSS rule

Now that you’ve uploaded the font files to Shopify, you need to create a @font-face CSS rule to reference them in your theme. To do this, follow these steps:

1. Open the base.css file (or any other CSS file in your theme)

2. Add the following code to the file, replacing “font_URL” with the actual URL of the font files (you can copy the URL by clicking the link icon next to the file name):

    @font-face {
      font-family: 'Font name';
      src: url(font_URL) format('woff2');
      src: url(font_URL) format('woff2');
    }
   

3. Save the CSS file.

Use the custom font in your theme

Unfortunately, it’s not possible to easily add your custom font to the Shopify system fonts category. If you want merchants to be able to choose the custom font through the theme settings in the Customize section, you’ll need to create a new font selector or other suitable setting.

In our case, we’ll use the custom font only for headings, so we won’t create a new font selector (it would add unnecessary complexity to our solution). Instead, we can add the font-family property straightaway to the heading elements in our theme. Here’s an example of what the code might look like (your theme’s heading settings may vary):

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: 'FONT NAME', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  letter-spacing: calc(var(--font-heading-scale) * 0.0rem);
  color: rgb(var(--color-foreground));
  line-height: calc(1 + 0.1 / max(1, var(--font-heading-scale)));
  word-break: break-word;
  text-transform: uppercase;
}

And that’s it! You’ve successfully added a custom font to your Shopify store and applied it to your headings. To see the changes, try refreshing the page and clearing your cache. If you still can’t see the custom font, make sure you’re using the correct URLs.

Congratulations on completing this guide! We hope it was helpful and that your Shopify store now looks even better with your custom font. If you have any questions or run into any issues, feel free to reach out for support.