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!
Click here for the detailed instruction to add the Google font or Adobe font to your store.

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.ttf"|asset_url}});
}
</style>

 

Replace the below elements of the code with actual data. 

  • Font name: the name of the font.
  • Fontname.ttf: the name of the file that was previously uploaded to your theme including the file extension, for example, LexendExa.ttf. Don't forget to replace the correct extension of your font file.

 

 

Hit “Save” when finished.

 

Step 6: Look for the file “theme.gem-layout-none.liquid” under the Layout section or via the search bar. Select to open the file.

Next, repeat step 5 within this file. 

 

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: Next, select “Add custom font” at the top right corner.

 

 

Step 4: 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 5: 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?