How to Add Fonts to Shopify Themes

how to add fonts to shopify themes

This is a question I get asked all the time by my clients: “How do I add custom fonts to my Shopify store?”

Whether you’re trying to match your brand’s vibe or just want something that makes your store stand out, adding custom fonts is one of the easiest ways to give your site a unique look. And trust me, it’s not as complicated as it sounds—I’ll break it down for you step-by-step.

Step 1: Pick the Right Font

The first thing to decide is where your font is coming from.

  1. Google Fonts: These are free and super easy to add.
  2. Custom Fonts: If you have a specific font file (like .woff, .woff2, or .ttf), you’ll need to upload it directly into your Shopify theme.
    • Pro Tip: Stick with .woff or .woff2 because they’re optimized for the web.

Step 2: Upload the Font Files to Shopify

Once you’ve got your font, it’s time to get it into your store.

Go to your Shopify Admin and head over to Online Store > Themes > Actions > Edit Code.

shopify edit theme

In the left-hand menu, look for the Assets folder.

Click Add a new asset and upload your font file (e.g., my-custom-font.woff2).

add new asset

Now your font is saved in Shopify’s theme files and ready to use!

Step 3: Add the Font to Your CSS

Next, we’ll link the font to your site.

  1. Still in the Edit Code section, find your CSS file. The file might be called theme.css, styles.css.liquid, or base.css—it depends on your theme.
  2. At the top of your CSS file, add the following code:
cssCopyEdit@font-face {
  font-family: 'MyCustomFont'; /* Replace with your font’s name */
  src: url('{{ "my-custom-font.woff2" | asset_url }}') format('woff2'), 
       url('{{ "my-custom-font.woff" | asset_url }}') format('woff');
  font-weight: normal;
  font-style: normal;
}

Step 4: Apply the Font to Your Site

Now that the font is linked, you just need to tell Shopify where to use it.

For example, if you want to apply it to your headings and body text:

cssCopyEditbody {
  font-family: 'MyCustomFont', sans-serif;
}

h1, h2, h3 {
  font-family: 'MyCustomFont', serif;
}

You can replace body, h1, h2, etc., with any elements you want. If you’re using a page builder or custom code, you can assign it to specific classes too.

Step 5: Test Your Font

Before you celebrate, let’s make sure it looks good:

  1. Clear your browser cache or open your store in an incognito tab.
  2. Check the font on both desktop and mobile.
  3. Keep an eye on load time—heavy font files can slow things down.

Bonus: Using Google Fonts (The Shortcut)

If your font is available on Google Fonts, you can skip the upload step entirely:

  1. Go to Google Fonts, pick a font, and copy the @import URL (it looks like https://fonts.googleapis.com/css2?family=YourFontName).
  2. Paste this at the top of your CSS file:
cssCopyEdit@import url('https://fonts.googleapis.com/css2?family=YourFontName');
  1. Apply the font the same way as before using font-family.

Why This Matters

Typography sets the tone for your brand. A sleek font can give your store a polished, professional vibe, while a playful one can make it more fun and approachable.

And it’s not just about looks—custom fonts can improve readability, boost engagement, and even make your store feel more trustworthy.

If you’re stuck on how to make your Shopify store look its best, let me know—I design custom stores and themes for businesses all the time. You’re just one font away from leveling up your site!

I'm a highly motivated self-taught software developer with over a decade of experience. My journey in software development began when I left college to pursue my passion, and since then I have been working on a wide range of projects. I have extensive experience creating custom WordPress sites, mobile apps using React Native, web apps using React-based frameworks, and Shopify apps with Node.js. I have also played with numerous other technologies, tools, and frameworks over time, and have contributed to many open-source projects. I pride myself on creating clean, well-formatted, and properly documented code that is easy to maintain. My perfectionist approach ensures that every project I deliver meets the highest standards. I always ask myself, "If I were the client, would I be happy with this?" This mindset has helped me to deliver excellent projects for my clients and build a reputation for quality work.

Leave a Reply

Your email address will not be published. Required fields are marked *