How to upload custom font to Your Shopify store

Shopify's Font Picker and GemPages Font picker already provide you with many options. However, if they don't satisfy you, you still have the option to manually upload fonts to Shopify. 

Upload font to your theme 

Step 1: Download the third-party font you want to add to your site. Ideally, each font will include 4 font files: 

• .eot
• .woff (or .woff2)
• .ttf
• .svg

Step 2: Upload the font files to your theme 

• From Shopify admin >> Online Store >> Themes >> Actions >> Edit Codes

• Scroll down to section Assets and select Add a new asset

Step 3: Manually upload your font files one by one 

Step 4: Add font-face

• Open file theme.scss.liquid ( in some themes it can be styles.scss.liquid) 

• Add this following codes at the bottom of the file: 

@font-face {
  font-family: "FontName";
  src: url('{{ "FontName.eot" | asset_url }}');
  src: url('{{ "FontName.eot" | asset_url }} ?#iefix') format("embedded-opentype"),
       url('{{ "FontName.woff" | asset_url }}') format("woff"),
       url('{{ "FontName.woff2" | asset_url }}') format("woff2"),
       url('{{ "FontName.ttf" | asset_url }}') format("truetype"),
       url('{{ "FontName.svg" | asset_url }} #FontName') format("svg");
}

Step 4: Now the fonts are uploaded, and the files referenced, we can include the fonts in our store.

If you wanted all headers throughout your site to change to the new font, you could add the following:

h1, h2, h3, h4, h5, h6 { font-family: "Font"; }

Integrate the uploaded custom font to GemPages 

Step 1: From GemPages editor, click on a text-based element ( Heading, Text Block, etc..) to reveal the settings on the left sidebar. 

Step 2: Under tab Settings, select Font Manager 

Step 4: Paste the exact font name into the field and hit Add.

Step 5: Hit Save. You will notice your custom font is now added in the dropdown of Settings editor.