Shopify Custom Fonts: How to Add Them to Any Online Store 2.0 Theme

Shopify custom fonts are easier to set up than most people expect, and they work with Dawn and every other Online Store 2.0 theme.

Shopify's theme editor gives you a good library of fonts, but sooner or later you will want something that matches your logo and packaging exactly. Adding custom fonts to Shopify takes about fifteen minutes and a little bit of code. Do not worry, you only need to copy and paste carefully.

Before you start

• Check the licence. Uploading a font file to a website is web use, and a store is commercial. Make sure your font licence covers it. Our font licensing guide explains what to look for.
• Get the WOFF2 file. It is the smallest web format and loads fastest. Many of our fonts, such as Know and iBrand, include WOFF2 in the download.
• Duplicate your theme in Online Store → Themes → … → Duplicate so you can experiment safely.

Step 1: upload the font file

1. In your Shopify admin go to Content → Files.
2. Click Upload files and choose your WOFF2 file (and the bold version if you have one).
3. After uploading, click the copy-link icon next to each file and paste the URLs into a note. You will need them in a moment.

Step 2: add @font-face to your theme

1. Go to Online Store → Themes, click the three dots on your duplicated theme and choose Edit code.
2. Open the main stylesheet in the assets folder. In Dawn and most Online Store 2.0 themes it is base.css.
3. Scroll to the very bottom and paste this, replacing the URL with your file link:

@font-face {
  font-family: "Brand Font";
  src: url("YOUR-WOFF2-FILE-URL") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Add a second @font-face block with font-weight: 700 for the bold file if you uploaded one. The font-display: swap line makes text appear immediately while the font loads.

Step 3: tell the theme where to use it

Most stores use a custom font for headings and keep a simple font for body text. Add this below your @font-face rule:

h1, h2, h3, .h0, .h1, .h2, .h3 {
  font-family: "Brand Font", sans-serif;
}

Want it on buttons or the announcement bar too? Add those selectors to the list, for example .button. Save, then preview the theme.

Step 4: check mobile and speed

Open the preview on your phone. Headings should look sharp and load quickly. If text flashes or loads slowly, make sure you used WOFF2 and that you are not loading several weights you do not use. Our post on web fonts and website speed covers more optimisation tips.

Choosing a font that suits a store

• Fashion and beauty: an elegant serif like Editorial Today for headings, paired with a clean sans for product details.
• Tech, gadgets and modern brands: a geometric sans like Lenia Sans or Grift.
• Handmade, food and lifestyle: a handwritten display font such as Guttery for headings only, never for long text.

Common mistakes

• Using a decorative font for body text. Keep it for headings.
• Forgetting the bold weight, so the browser fakes bold and it looks smudged.
• Editing the live theme directly. Always duplicate first.
• Uploading OTF or TTF instead of WOFF2. They work, but they are larger and slower.

What about apps?

There are Shopify apps that add custom fonts without touching code. They are convenient, but they add another script to your store and often a monthly fee. For one or two fonts, the manual method above is lighter, faster and free, and it keeps working even if you switch apps later.

Updating your theme later

Theme updates can replace base.css. Keep a copy of your @font-face code in a note, and after updating the theme, paste it back in. Some stores add the code to a separate custom.css file instead, which makes updates easier.

Find a heading font for your store in our font collection, and keep an eye on our Shopify themes category for ready-made designs.