For Free Users
1: Upload the font file in the Shopify Admin
To begin, if you do not have the font link available, you will first need to add the font file to 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.
Once you reach this stage, you will be presented with two alternatives for using the custom font with GemPages.
- Add the code to your theme: By choosing this option, the custom font will be implemented across all of your pages.
- Add the code to your page: This selection allows you to apply the custom font exclusively to a specific page.
2.1: Add code to your theme
Step 1: Navigate to Shopify Admin > Online Store > Themes. Click on the three-dot button and select “Edit Code”.
Look for the file “theme.liquid” under the Layout section or via the search bar. Select to open the file.
Step 2: Add the following codes to the file.
<style>
@font-face {
font-family: Fontname;
src: url(Linkfont);
}
body * {
font-family: Fontname !important;
}
</style>
Don’t forget to replace the below elements of the code with actual data.
- Fontname: the name of the font.
- Link font: the link of the Font File that was previously uploaded. It is copied after you select the Link icon.
In this example, if you wish to upload the font named Roboto-Black, the corresponding code would be as follows:
style>
@font-face {
font-family: Roboto-Black;
src: url(https://cdn.shopify.com/s/files/1/0747/9184/6180/files/Roboto-Black.ttf?v=1683532202);
}
body * {
font-family: Roboto-Black !important;
}
</style>
Step 3: Hit “Save” when finished.
Step 4: Look for the file “theme.gempages.blank.liquid” under the Layout section or via the search bar. Select to open the file.
Next, repeat step 2,3 within this file.
2.2: Add code to your page.
If you prefer not to apply the custom font to all pages, please proceed with this approach. It’s important to note that the Font Manager is not yet accessible in the beta version of Editor v7. As per the instructions provided in this method, the custom font can only be applied to a specific template. Therefore, you will be required to repeat the same steps for each template in which you intend to employ the custom font. This functionality is still in the developmental phase, and we will ensure to provide you with any further advancements.
Step 1: From the GemPages Dashboard, open your preferred template to edit.
Step 2: From the left sidebar, drag & drop a Custom Code element onto your preferred spot on the page.
Step 3: Under Settings > Custom Code, input the code below into the CSS tab. Don’t forget to replace the below elements of the code with actual data.
- Fontname: the name of the font.
- Linkfont: the link of the Font File that was previously uploaded. It is copied after you select the Link icon.
@font-face {
font-family: Fontname;
src: url(Linkfont);
}
body * {
font-family: Fontname !important;
}
Step 4: Don’t forget to hit “Save” and “Publish” the template.
For Paid Users
1: Upload the font file using GemPages
Paid users can utilize GemPages for an easier method to incorporate custom fonts across all elements containing text settings.
Step 1: Within the GemPages Editor, choose any element containing text settings, such as a heading.
Step 2: Within the font options, select the More icon beside the font name to reveal the font list. Then, click on “Upload font”.
Step 3: Once the upload is successful, the font will be visible in the “Custom font” section, which currently supports popular types such as ttf, otf, woff, and woff2.
Step 4: Hit “Save” and “Publish“.
2. Delete a font file using GemPages
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.
3. 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.
If you’re interested in learning more about powerful, user-friendly GemPages, feel free to explore the Help Center or get in touch with our delicate customer support via email or live chat.