How to add custom font to Shopify

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest

Table of Contents

Shopify’s latest theme version gives merchants lots of font access through font picker. some times if you want to add a custom font to Shopify store but it’s not possible to add a custom font using Shopify font picker. Instead of using some code, you can add a custom font.

Buy or Download Webfont version of your font. Webfont version is woff and woff2 file. If you have a ttf or otf font file convert this file into woff and woff2 font file.

Download Font: https://www.dafont.com/

Convert font : https://cloudconvert.com/

From your Shopify dashboard, go-to online store → themes→ Click action → edit code.

Now go to the left sidebar and upload two font files from assets → add a new asset→ upload font woff and woff2 font file.

After upload, the font file opens the file theme.scss.liquid from assets. Scroll to the bottom of the theme.scss.liquid file and paste the following code…..

@font-face {
      font-family: 'Name_of_font';
      src: url('Name_of_font.eot');
      src: url('Name_of_font.eot?iefix') format('eot'),
           url('Name_of_font.woff') format('woff'),
           url('Name_of_font.ttf') format('truetype'),
           url('Name_of_font.svg#webfontZam02nTh') format('svg');
      font-weight: normal;
      font-style: normal; }

Replace the name_of_font with your name of the font file.

Then Paste the below code and change the class-name.

Class-name{
font-family: "Nomark" !important;
}

The font is installed and replace the font name. Now go to your store Home page in another browser, inspect the text (which one you want to change the font), and copy the class. Now replace the class name and click save. Reload the browser now will see change the font. This way you can change every font.

Example: .section-header .section-header__title{
font-family: "Nomark" !important;
}

Leave a Comment

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