How to Use Google Fonts on your Pages

Customize and brand your site with Google Fonts. Learn to use Google Fonts in different Text sections of your Page. This guide refers to the new Kajabi Pages Theme.

In this article:


Step 1: Click here to choose a Google Font.

  • Select the + next to your chosen Font Name.
  • In the bottom right corner, click the black bar to open the popup.
  • Under the Embed Font header, click @IMPORT.
  • Highlight the text between <style> and </style> and copy the highlighted text:

googlefont1

Step 2: Paste the first snippet of code into your Page.

  • In a separate browser tab, log into your Kajabi account.
  • Open the Website tab from your dashboard.
  • Click Pages from the sidebar.
  • Select the Page you wish to edit and click Customize.
  • In the sidebar editor, click Settings.
  • Then, click the Custom Code tab.
  • In the CSS Code field, paste the text you copied in Step 1.
  • Then, click Save to keep your changes:

googlefont2

Step 3: Prepare your Text section for the second snippet of code.

  • Next, select the Text block you wish to customize or create a new one.
  • In the sidebar editor, click open the source code <>:

6E872A60-DEC9-443C-B4A9-A7DFC825A8A4

Locate the Header and/or Base Font Text

To customize only the Header Font of your Text block:

  • Locate the code <h2> and the ending code </h2>.

To customize only the Base Font (the normal text) in your Text block:

  • Locate the code <p> and the ending code </p>.

However, if you wish to customize both the Header and Base Font in your Text block, locate both <h2> </h2> and <p> </p>. Then, follow the instructions below for both.

After locating the Header and/or Base Font

  • Copy the snippet of code exactly as shown below: <span style="ENTER SECOND PIECE OF CODE HERE">
  • Depending on the text you choose to customize, after <h2> and/or <p> paste the code snippet:

googlefont3

Step 4: Enter final snippet of code from your Google Font.

  • Navigate back to your browser tab with your Google Font and locate the Specify in CSS header.
  • In the grey highlighted field, copy the entire text.

11331824-BC2C-43EB-B9C8-00EF6198EDEE

  • Lastly, return to your page in Kajabi.
  • In the source code <>, replace "Enter Second Piece of Code Here" with the second snippet of code copied from your chosen Google Font.
  • Click Ok then Save to keep your changes:

googlefont4

Tip:
Be sure to follow the code snippets exactly and remove or add any spaces, symbols, or text that may have changed during the process of copying and pasting the snippets of code to your Page.

Contact support or access our 24/7 Live Chat:

Contact Support Live Chat

Need Help? Chat With Us Now!