Add Custom fonts to Shopify theme [An Easy Approach]

The vast majority of Shopify themes already include a selection of Google Fonts as part of their basic installation. You can simply access them and make changes to them on the customize page of your theme, where you may also experiment with a variety of different styles and combinations, depending on the theme you’re using.

However, one aspect of Shopify that is not quite clear is how to add your own unique typefaces. Assume you downloaded a new font and now have several.ttf,.woff,.woff2, and/or other file extensions. How would you go about including them in your theme and, more crucially, making them the default font instead of the one that was previously used?

This guide will show you how to add Custom fonts to the Shopify theme. No coding skills are necessary, although, for more detailed adjustments, you may need HTML/CSS.

Making a copy of your theme for safety

You should have the theme downloaded before beginning the lesson so that you can quickly turn back if you run into any problems.

Adding your store’s custom without coding

• Install a font app you find in the Shopify App Store on your website.
• To select and add the custom font you want to use, follow the app’s instructions.
• To change the font’s appearance in your store, including which elements and styles it will be applied to, use the app’s settings.
• To see how the custom font will look in your store, save your changes and run a preview.

Adding your store’s custom font files

We need to add the fonts to the Shopify store as our first step. We can then link to it in our code and use it in our theme.

• Go to Settings > Files from the Shopify admin area.

1. • In your Shopify theme’s code, add the font files to the @font-face rule and specify the font’s name and location.

   • Use the font-family property in your CSS to apply the font to the elements on your store that you want to be styled with the custom font.

   • Save your changes and preview your store to see the custom font in action.

So, upload all the font files that came with the.zip, or at least the ones you want to utilize. In this case, I only have a single TrueType font file (.ttf), therefore that is the one I will be sharing. Download this typeface/font (if you’d want to follow along) by clicking here.

• After uploading fonts, link them to the theme. We’ll return to this tab later.

Font-setting

• Online Store > Themes > Actions > Edit Code.

• Online Store > Themes > Actions > Edit Code.
• To create a new snippet, go to the “snippets” section of the menu and select “Add a new snippet.” Call your new snippet “custom-fonts.”
• Standardized, reusable code looks like this:

<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>

Remember that the above code needs to be adjusted so that it works with the font you’re using.

• “fontname” should be replaced with the font’s full name.
  Font URL (fonturl) is a reference to the specific font file. If the font you’re using includes extensions other than.ttf, such as.woff or.woff2, you’ll need to make the corresponding changes to the code above.

This is how it would work out for us:

<!-- wp:code -->
<pre class="wp-block-code"><code></code></pre>
<!-- /wp:code -->

To summarize:

– We use “Precious” font, therefore I altered it;
The URL link comes from the typefaces’ files page.

I eliminated the other code lines because there’s only a.tff file. Also, terminate every URL line with a semicolon.

Finally, add this code to our custom-fonts snippet before the /style> line. Don’t forget to rename “Precious” to your font:

1. h1,h2,h3,h4,h5,h6,html,body,*,[id] *{
2. font-family: "Precious" !important;
}

• The last step is to load the custom font.
• Go to the file called theme.liquid.
• Press CTRL+F or command+F on a Mac to find the /body> tag.
• Add the code below:
• “custom-fonts” is included in %.
• And you’re all set.