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:

.ttf /.otf
.woff (or .woff2)
.svg
.eot

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.

Add this following codes to the mentioned files 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.

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.

Upload font to your theme

Integrate the uploaded custom font to GemPages

Related Articles