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.
Hit “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, hit “Add theme fonts”.
Step 4: Enter the exact font name into the field and hit “Add.”
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.