How To Add A Custom Font To A Shopify Store

Hi everyone, I’am Büşra. On a project I took part in Tio, a digital product studio based in Istanbul, we decided to have the e-commerce part with Shopify integration. I want to share with you a few things that I learned along the way.

This post is about how to add unique custom fonts in Shopify. We’ll learn step by step. Let’s go!

First of all, I want to tell you there are different ways to use custom fonts in Shopify. Questions are which Shopify Apps you can use, how to choose between apps such as Fontify, Fontbox, FontPicker, etc. These apps are free tools you can use for Google fonts. However, they mostly require a paid subscription to install your own custom font.

Let’s take a look at the Fontify. 👇🏻

Go to the Fontify site, enter your Shopify domain and finally click install. After that, the screen below will appear, click the Install App button. Now, your Shopify account is ready with a Fontify integration.

The app gives you two options for changing fonts at the redirected site Upload Fonts or Google fonts. When you upload your custom font to your Shopify account, there will be a pop-up. “You must upgrade plan to upload fonts (Fee is 10$)” sign will show up, it means you can’t upload custom fonts to your Shopify Store for free.

Your another option is using the Google fonts. To use Google Fonts, you should click to the choose button and select the font you want on font manager. Then you custom elements in the element picker. When you done, click the add font.

However, we won’t use the Shopify apps for custom fonts. Here is the way I applied:

Let’s take a look at the Shopify store I created as an example.

Login your Shopify store and go to the home section. You will see 5 steps:

Click customize theme. You will see the current theme, the dawn theme. Click view your store at this point.

Here is my store with the current font. :) Now, we will change this font to our own font.

By the way, you can see your current font by following Customize > Theme Settings > Typography sections. You can change fonts with existing fonts manually.

Firstly, I would like to clear up about font formats. There are many formats like otf, ttf, ttc, woff, woff2, etc. Some are used in desktop format and some are used in web format.

So, we have otf and ttf fonts. We must convert them to woff and woff2 to use on our Shopify website. To do this, you can search online converters in google. Then download to your desktop what you convert.

✨ Let’s get started with the first steps.

From your Shopify Admin go to Online Store > Themes > next to the current theme or the theme you want to edit click Actions > Edit Code. In the sidebar choose Assets > Add a new asset to upload your converted type of woff and woff2 fonts.

After that, you should click browse and upload your fonts one by one.

Now, we came to part of changing fonts with only using html and css. Create a new asset for your css codes. You can give to the file any name you want.

However, in order to make sure of our code in the “tio.css” file works, we need to define our own file under “base.css” in the “theme.liquid” file. It is because the codes in “base.css” can overwrite our codes. So, it is an important point you should consider.

After that, you should open the “theme.liquid” file in Layout. Then search the word “stylesheet” to find it easily and paste this code block under the code for “base.css”.

{{ ‘css file name’ | asset_url | stylesheet_tag }}

This is how it looks.

After that, we must import our font name and its file name like the following code.

@font-face {

font-family: “font name”;

src: url({{ “font file name.woff” | asset_url }}) format(“woff”);

}

Paste this code up the {% endstyle %} in “theme.liquid”.

Replace “font name” with the name of your font and “font file name” with the exact name of the font file on your computer.

Now the font is installed. In a new browser, tab preview your website and right-click on any words and select Inspect. A window will pop up showing you the code of the site. What you want to change, you can experience it here first before write it in your own css file.

Anyway, I took “body, h1, h2, h3, h4, h5, h6, p, li, a” to change as I shared below.

Then save your changes and refresh your website.

As you can see, my store’s fonts have changed to the name of SwearDisplayDemo font. You can check it out by Inspect.

That’s it.

How simple is it, right? Although it is a simple process when you understand the mindset, it can be very complex for first timers. It is advantageous and instructive to be able to find a new solution with trial and error.

Now you can upload a custom font to your Shopify. Adding a custom font to Shopify will make your store more unique and eye-catching to your customers.

I hope this tutorial is useful for anyone who is searching for an answer and struggling like me. :)

This is my first writing experience and I enjoyed it. You can see me with other tutorials. Consider subscribing to my blog. Au revoir! :)