
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.
- Google Fonts: These are free and super easy to add.
- 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.
- Pro Tip: Stick with
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.

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
).

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.
- Still in the Edit Code section, find your CSS file. The file might be called
theme.css
,styles.css.liquid
, orbase.css
—it depends on your theme. - 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:
- Clear your browser cache or open your store in an incognito tab.
- Check the font on both desktop and mobile.
- 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:
- Go to Google Fonts, pick a font, and copy the @import URL (it looks like
https://fonts.googleapis.com/css2?family=YourFontName
). - Paste this at the top of your CSS file:
cssCopyEdit@import url('https://fonts.googleapis.com/css2?family=YourFontName');
- 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!