Add custom fonts to your Shopify theme [Complete Guide]

Most Shopify themes, by default, come with a variety of Google Fonts built-in. Depending on your theme, you can easily find and change them on the Customize page of your theme and play around with a few different styles and combinations.

However, one thing that is not quite straightforward in Shopify is: how exactly can you add your own custom fonts? Say you’ve downloaded a new font and you have now a few .ttf, .woff, .woff2, and/or some other file extensions. How would you go about adding them to your theme and, equally importantly, making them the default instead of whichever font was previously being used?

In this tutorial, I’ll be teaching you how to achieve that. Also, don’t worry – no coding knowledge is required, but for more thorough customizations of how to style each specific HTML element with your font of choice, you may need some familiarity with HTML/CSS.

Making a backup copy of your theme

Before diving into the tutorial make sure you download the theme, so in case you face any issues you can easily revert back.

Adding the custom font files to your store

The first thing that we have to do is to add the fonts to the Shopify store. From there, we can reference it via code and use it in our theme.

  1. From your Shopify admin, navigate to Settings > Files.
  2. Click on upload files at the top right and upload all of your font files. Web Font files are the ones that have the following extensions: .ttf, .woff,.woff2, .eot, .svg or .otf. Different browsers support different files. Namely:
    – Internet Explorer → .EOT;
    – Edge → .WOFF
    – Safari (3.2+) → .TTF / .OTF;
    – Chrome (all versions) → .SVG/.TTF/.OTF;
    – Firefox (3.5+) → .TTF/.OTF/.WOFF;
    – Opera (10+) → .TTF/.OTF

    Therefore, make sure you upload all font files that came with the .zip, or at least the ones you want to use. In this case, I have one single font file with the .ttf format, so I’ll be uploading only this one. (If you would like to follow along with me, you can download this font by clicking here).
  3. Once you have uploaded all of your font files, it’s time to connect them to the theme. Leave this tab open, though – we’ll be returning to it soon.

Setting up the font

  1. In your Shopify admin, navigate to Online Store > Themes Actions Edit Code.
  2. Under snippets, click on “Add a new snippet” and create a snippet named: custom-fonts
  3. This is the code we will use as a boilerplate:

<style>
  @font-face {
  font-family: "fontname";
  src: url('fonturl-eot') format("embedded-opentype"),
       url('fonturl-woff') format("woff"),
       url('fonturl-woff2') format("woff2"),
       url('fonturl-ttf') format("truetype"),
       url('fonturl-svg') format("svg");
   }
  </style>

Important: the code above has to be modified to work with your font.

– “fontname” = exact name of the font you add.
– “fonturl-” = link to the respective font file. So, if your font file has .woff and .woff2, replace them accordingly on the code above.

In our case, it would look like this:


<style>
      @font-face {
      font-family: "Precious";
  src: url('https://cdn.shopify.com/s/files/1/0439/1577/2000/files/Precious.ttf?v=1618926445') format("truetype");
   }
  </style>

To reiterate what is happening above:

– The font name we are using is “Precious“, so I changed it accordingly (make sure to include the quotes);
– The URL link comes from the files page that you uploaded the fonts.

Because there is only the .tff file, I deleted the other lines in the code. Also make sure that the last URL line always ends with a semicolon.

  1. Finally, in the custom-fonts snippet that we created, add the following code before the </style> line. Don’t forget to also rename “Precious” to whichever font name you’re using:


Final step: loading the custom font

  1. Navigate to the theme.liquid file.
  2. Find the </body> (press CTRL + F or command + F on Mac)
  3. Add the following code:
    {% include 'custom-fonts' %}
  4. And you’re ready to go!

Shop

Background with geometric patterns.Background with geometric patterns.Background with geometric patterns.Background with geometric patterns.Background with geometric patterns.Background with geometric patterns.

In need of a Shopify developer?

Feel free to reach out, we'll work together to find a custom solution that attend your needs.

Request a free quote

Contact Us

Contact us to learn more about how we can help grow your business. No strings attached.

Send us an e-mail and we'll get back to you within 24 hours! Before you click on "send message" please make sure to do the ReCaptcha so your e-mail can be sent safely. 🙂

Loading...