Can I upload my custom font?

What is a custom font?

A custom font is a typeface that isn’t included by default in standard libraries like Google Fonts. Instead, it’s uploaded manually to your store to reflect your brand’s personality. Using Shopify custom fonts helps build stronger brand recognition, elevate your storefront design, and stand out from competitors.

Whether you’re aiming for a bold, luxury feel or a playful vibe, custom fonts give you the flexibility to fully control your typography across landing pages, product sections, and more.

Uploading Custom Font in GemPages Version 7

With GemPages Version 7, you can upload Shopify custom fonts directly within the editor. Although Google Fonts is available, this feature allows you to bring in any font you want.

Upload font

Step 1: Within the GemPages Editor, choose any element containing text settings, such as a heading. 

Step 2: Prepare the font.

You can download the font you want to use from an online/offline source or purchase it from a provider. Then, save the font to your computer to upload it in GemPages Editor.

Step 3: Go to the Font section and open the font list. Then, click the Upload font button.

Step 4: Once the upload is successful, the font will be visible in the “Custom font” section.

Step 5: Check how the custom font is displayed.

• In GemPages V7 Editor

• In Live Page mode

Go to Global Styles and access the Font Manager section. There, you can upload the custom font for your Heading and Paragraph. 

Delete font

Step 1: Within the font options, select the More icon beside the font name to reveal the font list.

Step 2: Search for your custom font, then choose the Trash icon beside it.

Step 3: Confirm your deletion.

Check your recent custom fonts

Step 1: Within the font options, select the More icon beside the font name to reveal the font list.

Step 2: Check the three most recent fonts displayed at the top of the font list.

Uploading Custom Font in GemPages Version 6

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.

Step 1: Go to Shopify Admin > Content > File.  Upload your Font File by selecting “Upload file”.

Step 2: The opened window will allow you to select the font file to add. After having successfully uploaded the file, select the “Link” icon to copy the file link.

Step 3: Go to Online Store > Themes. Click on the three-dot button and select “Edit Code”.

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

Step 4: Add the following code 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.

Click “Save” when finished.

Step 5: 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 4 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 Manager, click on the “Theme Fonts” tab. Next, click “Add theme fonts”.

Step 4: Enter the exact font name into the field and click “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: Click “Save.” Your added font will then be displayed in the Font dropdown of the Settings tab.

FAQs

1. What are custom fonts in Shopify?

Custom fonts are fonts that you manually upload to your Shopify store, rather than using built-in ones like Google Fonts. They help you maintain consistent branding and give your store a unique look.

2. How to add fonts to Shopify?

To add fonts to Shopify, you need to upload your font file in the Files section of Shopify Admin, then use @font-face in your theme code to apply it. GemPages simplifies this process by allowing you to manage fonts within the editor.

3. Can I upload fonts directly to Shopify?

Yes, you can upload fonts to Shopify through the Content > Files section in your Shopify Admin. After uploading, you can link to the file using custom code in your theme’s liquid files.

4. How do I upload fonts in GemPages?

GemPages offers two ways to upload fonts:

• In Version 7, you can upload them directly in the Font Manager.
• In Version 6, you upload the font to Shopify, then integrate it into GemPages using the “Theme Fonts” feature.

5. Where can I manage my custom fonts in GemPages?

You can manage all custom fonts via the Font Manager in both the Global Styles and individual page editors. From there, you can upload, activate, or delete fonts as needed.