Upload Custom Fonts

With some custom code you can add your own fonts to our themes. These fonts will not appear in the theme editor as a dropdown option, but instead override the values directly in the stylesheet.

Generate your font and style files

Upload your custom font files to Font Squirrel with this tool. TTF file types have the best success. Then click the Download your kit button to get a zip file with the required files.

Add the font files to your theme

The first thing that we have to do is to add the fonts to the Shopify store. From there, we can reference it via code and use it in our theme.

Setting the Font

1. From your Shopify admin, navigate to Settings > Files > Upload file.

2. Under snippets, click on “Add a new snippet” and create a snippet named: custom-fonts

3. This is the code we will use:

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

1. the code above has to be modified to work with your font.

• “fontname” = exact name of the font you add.

• “fonturl-” = link to the respective font file. So, if your font file has .woff and .woff2, replace them accordingly on the code above.

In our case, it would look like this:

<style>
      @font-face {
      font-family: "Poppins";
  src: url('https://cdn.shopify.com/s/files/1/0439/1577/2000/files/Poppins.ttf?v=1618926445') format("truetype");
   }
  </style>

4. Finally, in the custom-fonts snippet that we created, add the following code before the </style> line. Don’t forget to also rename “Poppins” to whichever font name you’re using:

<style>
      @font-face {
      font-family: "Poppins";
  src: url('https://cdn.shopify.com/s/files/1/0439/1577/2000/files/Poppins.ttf?v=1618926445') format("truetype");
   }

   h1,h2,h3,h4,h5,h6,html,body,*,[id] *{
      font-family: "Poppins" !important;
   }
  </style>

Loading the custom font

Look for an open theme.liquid inside your snippets folder. Find the: </body> tag, and add the following code:

{% include 'custom-fonts' %}