Learn to customize and brand your site with custom fonts by embedding custom fonts from applications like Google Fonts and Adobe Fonts.
In this article:
Embedding custom fonts
Kajabi offers many native fonts in the Page Builder and with the latest updates you can use your own licensed font files to design a uniquely branded page.
With Kajabi's custom code feature available with the Page Builder, you can use a downloaded font file or use embed codes from various locations including Google Fonts and Adobe Fonts to add your custom font to your page.
Regardless of your Kajabi plan you can add custom fonts to your page without requiring access to the code editor with the latest updates to the Kajabi page builder.
It is important to note that adding your custom font will require a basic understanding of code embeds. This is where we can help!
This guide can help you better understand how to add custom font when your desired font requires you to use an embed code.
Let's start by discussing the basics about embed codes.
First, what is an embed code?
An embed code is a piece of HTML code that allows you to add a part of another website to yours such as a Youtube Video or in our case, a font like Google Fonts.
With Kajabi, embed codes can allow you to add almost anything to your site. With an embed code you can simply copy your desired appearance, application, or tool onto your site.
However, there are a few tips and tricks that can help you use an embed code to add custom fonts to your site.
With an embed code, you need to ensure that you are adding the exact code provided from your desired application.
However, the embed code will need to be added to your desired page according to the styling rules of the application you are adding it to, in this case, Kajabi.
For example, if you were to add an embed code directly to an individual page, you will include different code than if you were to add your embed code to your site settings to display across your entire website.
Although the embed code will remain the same, the surrounding code may vary.
In the following image you can see an example of the differences:
Adding custom font with Adobe Fonts
With an embed code, you can add your custom font to a Kajabi page. In this example, we will help you add custom fonts from Adobe Fonts.
What are Adobe Fonts?
Adobe Fonts is a product of the Adobe Creative Cloud Suite, and offers the ability to select from hundreds of pre-designed fonts.
Step 1. Get your embed code from Adobe Fonts
To begin using Adobe Fonts on your Kajabi site, start by obtaining the embed code for the font using this guide.
After the embed code has been obtained, navigate to your Kajabi account to insert the code onto your desired page.
Step 2. Add your embed code to your page
- Open the Website page from your Kajabi Dashboard.
- Click Pages.
- Select the page you would like to add your custom font to and click Customize.
- Inside the page, select Add Content in the left sidebar.
- Choose a Custom Code Block from the list of options, and click Add.
- Paste in your Adobe Font Code into the box:
Now that we have our Adobe Font code input into our page, it's time to insert the second part of the code.
- In the left sidebar, open the Settings tab.
- Then, click Custom Code.
- From inside the Custom Code section, insert into the CSS section:
h1 {
font-family: YOUR CODE HERE, sans-serif;
}
After you have added the code above, replace YOUR CODE HERE with the name of your embed code and replace h1 with the heading tag you wish to apply your font to.
Be sure to click Save to keep and apply your font:
Adding custom font with Google Fonts
With Kajabi Pages you can style and customize your text with custom font that best fits your brand by adding Google Fonts to your page.
Step 1. Click here to choose a Google Font
- Click your chosen Google Font.
- Click + Select this Style next to your chosen Font Style.
- Under the "Use on the web" section, 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 this step, we will be adding the first snippet of your Google Font code to your page on Kajabi.
- 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:
