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
Tip:
Keep two tabs open in your browser window, one for Google Fonts and the other for your Kajabi account. This will help you navigate between the two pages as you add your Google Font to your text.
- 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:
Note:
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.
