How to Add Custom Fonts to Any Shopify Themes: A Step-by-Step Guide

If you want to make your Shopify store stand out from the crowd, one of the best ways to do it is by adding custom fonts. Custom fonts can help you create a unique brand identity, enhance the visual appeal of your store, and attract more customers.

In this article, we will show you how to add custom font to Shopify in a few easy steps.

 

What are the benefits of adding custom font to Shopify?

Adding custom font to Shopify can have many benefits for your store, such as:

• Reflecting your brand: You can use custom fonts to convey your brand personality and values. For example, if you sell elegant and sophisticated products, you can use a serif font to create a classy and refined impression. If you sell fun and quirky products, you can use a playful and colorful font to create a lively and cheerful impression.

• Connecting with your customers: You can use custom fonts to evoke certain emotions and moods in your customers. For example, if you want to create a sense of urgency and excitement, you can use a bold and dynamic font. If you want to create a sense of trust and reliability, you can use a simple and clear font.

• Making your store eye-catching: You can use custom fonts to highlight the most important elements of your store, such as your logo, headlines, product names, prices, and call-to-action buttons. This way, you can draw attention to what matters most and increase conversions.

How to add custom font to Shopify?

To add custom font to Shopify, you will need to download the webfont version of your font, upload it to your theme assets, and edit your theme code. Here are the steps to follow:

1. Download the webfont version of your font. You can find many free and premium webfonts online, such as Google Fonts, Font Squirrel, or Adobe Fonts. Make sure the font files include at least the WOFF and WOFF2 file types, which are compatible with most browsers. TTF or OTF are not webfont file types and will not work.

1. From your Shopify admin, go to Online Store > Themes > next to the theme you want to edit click Actions > Edit Code. In the sidebar, choose Assets > theme.scss.liquid. Scroll to the bottom of the file and paste the following code:

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

Replace NAME OF FONT with the name of your font and NAME OF THE FONT FILE with the exact name (case-sensitive with hyphens) of the font file on your computer.

3. Below this code also paste the following code:

 

h1, h2, h3, h4, p  {

font-family: “NAME OF FONT”!important;

}

4. Go to the Assets folder and click Add a new asset. Upload each version of the font file one by one.
5. Now that the font is installed, using code we need to tell the theme what headings or text will use our new font. In a new browser tab go to your website and find the heading or text you want in this font, in this example it is a heading. Right-click on the words and select Inspect.
6. A window will pop up showing you the code of the site. Look in the right-hand column for the CSS code that is styling your heading. In the example above you will see on the left, highlighted in grey, the heading is an <h2> and on the right the CSS property selector for the heading is h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6. Click the property name and copy the text.
7. Go back to the browser tab with the theme code editor and open the theme.scss.liquid file again. Select the words that say “your CSS selector here” and paste what you have already copied. Then replace “NAME OF YOUR FONT” with the name you used before.
8. Save your changes, refresh your website and have a look at your custom font.

Congratulations! You have successfully added custom font to Shopify.

Conclusion

Adding custom font to Shopify is a great way to make your store more unique and attractive. By following this step-by-step guide, you can easily add any webfont you like to your theme and apply it to any text or heading you want. Custom fonts can help you create a strong brand identity, connect with your customers emotionally, and make your store eye-catching.

If you need any help with adding custom font to Shopify or any other aspect of your store design, feel free to contact us. We are a team of Shopify experts who can help you create a stunning and profitable store. We offer a range of services, such as theme customization, app integration, SEO optimization, and more. Contact us today and let us help you grow your business.