How to Use Google Fonts on Your Page

Customize and brand your site with Google Fonts. Learn to use Google Fonts in different Text sections of your page. 

In this article:

• Step 1. Select a Google Font
• Step 2. Paste the first snippet of code into your page
• Step 3. Prepare your text for the second snippet of code
• Step 4. Enter final snippet of code from your Google Font

Step 1. Click here to choose a Google Font

• Click your chosen Google Font.
• Click + Select this Style next to your chosen Font Style.
• In the right sidebar, click Embed.
• Under the Embed tab, click @IMPORT.
• Highlight the text between <style> and </style> and copy the highlighted text:

Step 2. Paste the first snippet of code into your page

• In a separate browser tab, log into your Kajabi account.
• Open the page editor for your Page. Learn more
• In the sidebar editor, click the Settings tab.
• Then, click the Custom Code.
• In the CSS Code field, paste the code you copied in Step 1.
• Then, click Save to keep your changes:

Step 3. Prepare your text 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 <>:

Locate the Header and/or Base Font Text

To customize only the Header Font of your Text Block:

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

The Header Font can be identified by the letter "h" and the Header Font Size number. For example, If your header is not a Heading Font Size 2, you may see<h1> instead.

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

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

However, if you wish to customize both the Header and Base Font in your Text block, locate both lines of code and 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:

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

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

• 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: