Spy on Your Competitors - Extended Free Trial!  GO!
How To Add A Font To A Shopify Theme

How To Add A Font To A Shopify Theme

Last modified: December 2, 2021

FAQ
Shopify Trial

One of the top questions shop owners have when they’re developing a Shopify store is whether they can add a new font to the store. While Shopify has lots of great fonts through their Shopify Font Picker, there are still going to be times when the theme/Shopify don’t have the right font for your store.

For this, you need to add the font to your Shopify theme files. Here are a list of steps that you must take in order to add a custom font to your Shopify store.

Recommended: The 10 Best Shopify Store Design Apps

# Name Image
Shopify
Shopify
More Info
1
PageFly Advanced Page Builder
PageFly Advanced Page Builder
More Info
2
GemPages Page Builder & Funnel
GemPages Page Builder & Funnel
More Info
3
Shogun Landing Page Builder
Shogun Landing Page Builder
More Info
4
LayoutHub Easy Page Builder
LayoutHub Easy Page Builder
More Info
5
Slider Revolution
Slider Revolution
More Info
6
Product Filter & Search
Product Filter & Search
More Info
7
Announcement Bar & Header Bar
Announcement Bar & Header Bar
More Info
8
Sales Pop Master ‑ Countdown
Sales Pop Master ‑ Countdown
More Info
9
Drobile ‑ Mobile App Designer
Drobile ‑ Mobile App Designer
More Info
10
Free Shipping Progress Bar
Free Shipping Progress Bar
More Info
Show More
Click here for more information about The 10 Best Shopify Store Design Apps.

Step 1 – Purchase Your Webfont Version

The thing that you will need to do is to purchase the webfont version of the font that you want to use. The font files must include both WOFF and WOFF2 file types.

Step 2 – Log In

Now you need to log into your Shopify store with your user credentials.

Step 3 – Themes

From the Shopify Admin page, you need to select the ‘Online Store’ option then the ‘Themes’ option. Then you must find the theme that you want to edit and click on the ‘Actions’ and then ‘Edit Code’ option.

Within the side bar, you should see the option ‘Assets’ click on this and then find the stylesheet.css.liquid file. You need to open this for editing.

Step 4 - Add Code

Scroll down to the bottom of the stylesheet.css.liquid file and then paste in the follow code:

@font-face {
  font-family: “FONT NAME";
  src: url("FONT_NAME_FILE.woff2") format("woff2"),
       url("FONT_NAME_FILE .woff") format("woff");
}

You need to ensure that you replace the FONT NAME and FONT_NAME_FILE with the correct names used for your font that you want. Be sure to use the exact name, this is very case sensitive and you should ensure all the right hyphens are used.

You should also insert the following code to the file:

your css selector here { font-family: "NAME OF FONT" !important; }

Step 5 - Assets Folder

Now go to the ‘Assets’ folder and click on the option to ‘Add A New Asset’. You should upload the font files one at a time.

Step 6 – Using Your New Font

As soon as the new font has been installed, you need to select the headings/text that will use the font. For this you will need to open up a new browser tab and load up your website’s front end. As soon as this is done, find the heading/text that you want to have in the new font and the highlight the words and select the ‘Inspect’ option to see the coding for this text.

In the popup or the screen that displays the coding, look at the right hand column for the CSS code. You need to find the CSS property selector for the text/heading, for instance, it could be .section-title.lines h2. Copy the property name.

Then you go back to your theme code editor and re-open the stylesheet.css.liquid file. Find the part of the code that you added earlier that read:

your css selector here { font-family: "NAME OF FONT" !important; }

And replace the your css selector here with the property name you copied before. Once done, save the changes and fresh the website.

Final Word: How To Add A Font To A Shopify Theme

When your website’s theme changes, it will result in the changes you’ve made being undone. Be sure that you change back again using the system above. If this is a struggle for you, and you have revenues of more than $300,000, then you might be best to move to Shopify Plus, as these technical details can be sorted for you.

You can read more about Shopify Plus here.

Recap:
Read More
Got Something To Say?

Your email address will not be published. Required fields are marked *

Free Trial