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