Uploading Custom Font in GemPages Version 7
With GemPages Version 7, you can upload custom fonts directly within the editor. Although the Google Fonts library is already available, this guide will help you upload other custom fonts for your templates.
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 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.
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.
