How to add a Google font to your store

This article will demonstrate how to add the Google font to your store and use it with the GemPages editor in minutes!
This article can also be applied to add the Adobe font to your store. 

Select your font

Step 1: Before we start, you will need to choose your font from Google Fonts’ official website.  

Step 2: Select your preferred font to open the detail page.



Select the style you want for your font by hitting “Select this style.” The embedded code will appear on the right sidebar. Under the Use on the web section, choose the <link> option.



Next, copy the codes as above to your clipboard for later use. 

For the Adobe font, please find the import code of your chosen font from the Adobe font website and continue following the below steps to add it to your store.

Upload Font To Your Theme

Step 1: From your Shopify Admin, navigate to Online Store > Themes > Actions and select “Edit Code.”

Step 2: Look for the file “theme.liquid” under the Layout section or via the search bar. Select to open the file.



Step 3: Scroll down until you see the <body> tag. Paste the code you copied before above this tag.



Hit “Save” when finished. 


Step 4: 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 3 within this file. 


Add The Google 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, select “Font Manager.”



Step 3: Next, select “Add custom font” at the top right corner.



Enter the exact font name from your Google font into the field and hit “Add.”



Step 4: Hit “Save.” Your added font will then be displayed in the Font dropdown of the Settings tab.



You can also check out this video tutorial for the detailed instruction on how to add the custom font to GemPages:



That's all! If you have any difficulty taking these actions, please let us know directly via email & live chat to have them answered!

Was this helpful?