How to Use a Google Font on Your Site With Premier

Kayla M.

Updated

Google Fonts can be added to Website Templates, Course Templates, and Landing Page Templates. Learn to add a Google Font to your page with the Legacy Template, Premier.

This article refers to the Premier Legacy Templates, which may be outdated! If you're using the new Kajabi Pages Templates, please refer to the updated guide here.


In this article:

Note:
Adding Google Fonts to your site with the Premier Template requires access to the Code Editor available with the Pro Plan. Learn more about our different plans at kajabi.com/pricing.
Learn to add Google Fonts to the new Kajabi Pages without accessing the Code Editor!

Step 1. Click here to choose a Google Font.

  • Find and copy the exact name of the Google Font you wish to use on your site. You'll need it in just a moment. For example:

Choose_a_Google_Font.png

Step 2. Add your Google Font to your site code

Navigate to your Kajabi account and open the Code Editor for the page where you wish to add your Google Font.

Learn to access the Code Editor.

Warning:
Introducing custom code to your site can open you up to vulnerabilities and potential malware attacks. We recommend using vulnerability tools like VirusTotal or Snyk to scan any custom code that you intend to use and apply certain best practices to help reduce potential impact.

In the Code Editor for your Page:

  • Open the config folder.
  • Open the settings_schema.json file.
  • Locate "name": "Typography" near line 29:

Note:
The line numbers may be different depending on your current settings.
  • Find the square brackets to input "options" near lines 59 and 77:

Options_Input_Brackets.png

Adding your font to the Base Font Family will add your font as an option for the normal paragraph text on your site.

Adding your font to the Heading Font Family will add your font as an option for the heading text on your site.

If you'd like to add your font as an option for all of your paragraph and heading elements, make sure to complete the following steps in both places.

  • Next, place your cursor in between the square "options" brackets and add curly brackets containing the name of your font exactly as shown below, replacing Name of Google Font with the name of your chosen Google Font:

{"label": "Name of Google Font", "value": "Name of Google Font"}

Add_Google_Font_to_Options_Code.png
  • Click Save, then click Customize:

Step 3. Select your new Google Font in the Page Editor

  • Click Settings in the left sidebar editor.
  • Then, select Typography.
  • Choose your new Google Font from the Heading Font Family and/or Base Font Family dropdown menus (it will appear at the top of the list).
  • Click Save to apply and keep your changes:

And that's how to use a Google Font on your site with Premier! Please vote below and let us know if you found this article helpful. We value your feedback. Thanks for being the best part of Kajabi!

Did you find this article helpful?

Need more help?

Contact Us