Add Custom Font To Your Shopify Store (Step by Step)

You don’t need an app to add a custom font to Shopify store. Let me walk you through the steps of adding font files and using Adobe fonts in your Shopify project.

In this article, we will show you:

• Add the font files to our theme

• Import these fonts into our CSS styles

• Define how we want these fonts used

Custom Fonts on Shopify

Step 1: Add the font

If you have the web font files, you want to head to your theme code. Go to Online Store → Actions → Edit Code. Here you’ll see a list of code files. Scroll down to the Assets folder and click “Add a new asset“. Here you need to upload your web font files. I’ll be adding “The Braggest”. I add four file types: .eot, .ttf, .woff, and .svg.

Step 2: Import font to styles

Find your theme.scss.liquid file where all your theme styles are held. If you are using a premium theme, check for a custom.css file instead. Scroll down to the bottom of the file.

If your fonts were added to assets, add the following code with your font file names. If you are using an Adobe font, put the code from your Adobe font project in the file instead. See the last line of code and replace ‘xxxx’ with your unique project code.

@font-face {
    font-family: 'TheBraggest';
    src: url('TheBraggest-Regular.eot'); /* IE9 Compat Modes */
    src: url('TheBraggest-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('TheBraggest-Regular.woff') format('woff'), /* Modern Browsers */
         url('TheBraggest-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('TheBraggest-Regular.svg#TheBraggest-Regular') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/** If you are using an Adobe font, import like this instead: **/
@import url("https://use.typekit.net/xxxx.css");

Step 3: Define font usage

The font I’m using is cursive and I want it used only for the main headings on the page – my H1 and H2 headings. I’ll go through the code defining how we want the font used step by step and give the final code at the end.

I need to define:

• Where I want this font used: h1, h2 {font-family: 'TheBraggest';}

• Provide a backup font: h1, h2 {font-family: 'TheBraggest', "Twentieth Century", sans-serif ;}

• The font size: font-size: 5em

• The font size on mobile: @include media-query($small) {font-size: 2.5em;}

• I don’t want the titles on my product pages to appear in this font as it is difficult to read with more than one word: h1:not(.product-single__title)

• Remove the uppercase style of these headings: text-transform: none;

This brings me to:

h1:not(.product-single__title),
h2 {
  text-transform: none;
  font-family: 'TheBraggest', "Twentieth Century", sans-serif ;
  font-size: 5em;
  margin-bottom: 0px;
  
    @include media-query($small) {
  font-size: 2.5em;
  }
}

I hope that was easy enough! Keep in mind that you may have to adjust some of the words such as the media-query $small and the product title class .product-single__title depending on your theme. This was done with the Debut theme.