Ecommerce Explorer

Add Custom fonts to Shopify theme [An Easy Approach]

author
3 minutes, 21 seconds Read

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. 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 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.
  • In the upper right, you’ll see an option to “upload files;” use this to send over your collection of typefaces. Files with the following extensions (.ttf,.woff,.woff2,.eot,.svg, or.otf) are considered Web Fonts. Formats supported by browsers vary widely. Namely:
  • -.EOT in Internet Explorer
  • This is the cutting edge.WOFF file format support.
  • The latest version of Safari supports.TTF and.OTF fonts.
  • All versions of Chrome .SVG/.TTF/.OTF
    -.TTF/.OTF/.WOFF in Firefox (3.5+);
    TTF/.OTF files for Opera 10+

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.

Similar Posts

Leave a Reply

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