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

Upload font to your theme 

With recent updates from Shopify, you can no longer upload .ttf and .ottf files into a theme anymore. Instead, you can add Font File into the File section in your Shopify Admin Setting

 

Step 1: From your Shopify Admin, navigate Setting section and select "File".

 

 

Step 2: Upload your Font File by selecting "Upload file"

 

 

Step 3: The opened window will allow you to select the font file to add. As an example, in this article, we are trying to upload a font called "Yumin". After having successfully uploaded the file, select the "Link" icon to copy the file link.

 

 

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

 

Replace the below elements of the code with actual data. 

  • Font name: the name of the font.
  • Linkofthefontfile: the link of the Font File that was previously uploaded. It is copied after you select the Link icon.

 

 

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, look for the Typography > Font section. Click on the dropdown menu and select “Open Font manager”.

 

 

Step 3: In the Font Library, click on the "Theme Fonts" tab. Next, hit "Add theme fonts"

 

 

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.

Next, hover over the Font name and click on the + icon to activate the font. 

 

 

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?