How to Add Custom Fonts to a Shopify Theme

Out of the box, Shopify comes with a ton of font options that will meet most users needs. However, if you have your heart set on a specific font and need it added to your Shopify theme, here’s a quick step-by-step tutorial to show you how to do that.

Step 1: Download your font

Make sure you have a font file ready. Your font might be in TTF, OTF, WOFF, or WOFF2 format. Ideally, for the web, you should use a .woff or .woff2 format. You can convert your font using Font Squirrel’s webfont generator.

Step 2: Upload your font

Next, while in Shopify, go to Online Store > Themes > (three dots) > Edit Code. Scroll down to Assets and click “Add a new asset.” Upload your font file.

Step 3: Add CSS

Next, open Header.liquid from under Sections and copy and paste the below code inside the <style></style> brackets. Remember to replace “your-font-file” with the file name of your custom font and “My Custom Font” with the name of your font.

@font-face {
  font-family: 'My Custom Font';
  src: url('{{ 'custom-font.woff2' | asset_url}}') format('woff2'), url('{{ 'custom-font.woff' | asset_url}}') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* To replace the titles only */

h1, h2, h3, h4, h5, h6 {
  font-family: 'My Custom Font', sans-serif !important;
}
/* To replace the body/paragraphs only */

p, li, span {
  font-family: 'My Custom Font', sans-serif !important;
}

Save when you’re done and exit the Code Editor. You should see your changes, but if you don’t, remember to clear your browser cache.

Update: Alternative Method

If the above method doesn’t work, try uploading your font file under Content > Files instead. Next, copy the link and use this CSS code instead, replacing “your-font-link” with the link you just copied:

@font-face {
  font-family: 'My Custom Font';
  src: url('{{ 'your-font-link}}') format('woff2'), url('{{ 'your-font-link}}') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* To replace the titles only */

h1, h2, h3, h4, h5, h6 {
  font-family: 'My Custom Font', sans-serif !important;
}
/* To replace the body/paragraphs only */

p, li, span {
  font-family: 'My Custom Font', sans-serif !important;
}

Need some help?

From installation services to custom websites, we're here for any of your design or development needs.
Little Theme Shop
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.