How to upload custom font to your store

This article will demonstrate how to upload your custom font and use it with the GemPages editor in minutes!

Upload font to your theme 

Before we start, you will need to have your font files ready. At the moment, GemPages supports the following font file format. 

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

Step 1: From your Shopify Admin, navigate to Online Store > Themes > Actions and select “Edit Code.”

 

 

Step 2: Scroll down to the Assets section and select “Add a new asset.”

 

 

Step 3: The opened window will allow you to select the font file to add. Manually upload your font files one by one and hit “Upload asset” when finished.

 

 

Step 4: After that, look for the file “theme.liquid” under the Layout section or via the search bar. Select to open the file.



Step 5: Add the following codes at the bottom of the file.

 

<style>
@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");
}
</style>

 

Kindly replace “FontName” with the name of your font, and remember to include any hyphens or underscores so that it’s an exact match.

 

 

Add the uploaded custom font to GemPages.

Step 1: From the GemPages dashboard, open your preferred template to edit. Click on a text-based element (Heading, Text Block, etc.) to reveal the configurations on the left sidebar.

 

Step 2: Under the Settings tab, select “Font Manager.”

 

 

Step 3:  Under the Settings tab, select “Font Manager.” 

 

 

Step 4: Next, select “Add custom font” at the top right corner.

 

 

Step 5: Enter the exact font name into the field and hit “Add.”

Please enter the exact name as font names are case-sensitive. You can double-check the name in the “theme.liquid” file, as shown in the previous step.

 

Step 6: Hit “Save.” Your added font will then be displayed in the Font dropdown of the Settings tab.

 

 

 

That's all! If you have any difficulty taking these actions, please let us know directly via email & live chat to have them answered!


Was this helpful?