Upload the font file
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.
Method #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.
Hit “Save” when finished.
Step 3: 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 within this file.
Method #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.
- Link font: 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.
That’s all! If you have any difficulty taking these actions, please let us know directly via email & live chat to have them answered!