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. 

This is an advanced tutorial and it is not supported by GemPages. Knowledge of web design languages such as HTML, CSS, Javascript, and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.
Duplicate your theme to back up before touching the codes so that you can easily revert back your theme to the original stage

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");
}
Replace “FontName” with the name of your font, and remember to include any hyphens or underscores in the name so that it’s an exact match.
You may need to add or remove lines from this chunk of code depending on the file types that you’re uploading. For example, if you’re not uploading a woff2 file, remove the woff2 line completely. 

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"; }

Replace “Font” with the name of your 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 3: In Font Manager, select Add custom font at the top right corner

 

 

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

Font name is case-sensitively, therefore, please type it precisely. You can confirm the font name by double-checking the file theme.scss.liquid ( or style.scss.liquid) where you uploaded the font files. 

 

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

 


Was this helpful?