How to Use Google Fonts on your Pages
In this article:
- Step 1: Click here to choose a Google Font.
- Step 2: Paste the first snippet of code into your Page.
- Step 3: Prepare your Text section 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.
- 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 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 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:
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
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
To customize only the Base Font (the normal text) in your Text block:
- Locate the code
<p>and the ending code
However, if you wish to customize both the Header and Base Font in your Text block, locate both
</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
<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 Specify in CSS 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:
Was this article helpful?
Need Help? Chat With Us Now!