[Editor 7.0] Upload Custom Font

This article will showcase the step-by-step procedure for uploading your custom font and seamlessly integrating it into the new editor within minutes.

Please be noted that the Google Fonts library has already been incorporated into our new Editor and is available for use. However, this guide will specifically cover the process of adding other custom fonts to use on a template.

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. As an example, in this article, we are trying to upload a font called “Roboto-Black”. 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 > 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 7.0. 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.