I love Kajabi, but its web page customization limitations can get frustrating.
Fortunately, there are workarounds to create a fully on-brand site without compromising on the design. One such workaround is adding custom fonts.
Key Takeaways:
- Kajabi features around 70 inbuilt Google fonts
- The platform supports HTML and CSS code for custom fonts
- Easily add Google and Adobe fonts to your web pages
Kajabi’s Inbuilt Fonts Selection Is Limited (and Boring)
Sorry to disappoint you, but Kajabi’s font selection isn’t going to set your world on fire.
Altogether, there are around 70 basic Google fonts to pick from. You will find all the old favorites like Roboto, Arial, Montserrat, etc. Plus, a grand total of three script fonts.
Exciting. Not.
Unfortunately, if you want your brand to stand out from the usual blandness of a standard font set, you will have to do some extra work.
Why I Chose a Custom Font for My Kajabi Site
Arial is great and all, but it doesn’t work for my brand.
I wasn’t always on Kajabi. Previously, I already had a customized site built on WordPress, I also have a presence elsewhere online, and I’ve worked hard to establish my brand. So, I didn’t want to compromise it just because Kajabi doesn’t offer the right fonts.
Therefore, using a custom font was the right choice for me. I get to use all of Kajabi’s awesome tools while still ensuring my site remains on-brand and recognizable to my audience.
Also, my custom fonts match the style and tone of my products, which is something that is really important for establishing credibility in my niche.
Importing Custom Fonts into Kajabi Is Not as Hard as You Think
The good news is that Kajabi supports the addition of custom fonts to its web pages.
The bad news is that it involves the custom code editor, so it’s not an entirely straightforward process.
Before you wince at the thought of using custom code, I’m here to tell you that it’s not that complicated. I’m the least techy person around, and if I managed it, you can manage it too!
Okay, so when I say “custom font,” I mean a font that’s not supported natively on Kajabi. I haven’t gone and had a whole new font created for my brand.
Although you can do this, you will need a designer to create the font and then a coder to create the embed code for it. This will almost certainly be a very expensive exercise, so I don’t really recommend it.
Instead, Google offers over 1,500 fonts, while Adobe has over 30,000! And there are tons of independent font designs out there. So, the likelihood is that you’ll find the right fit for your brand.
All you need is the embed code of your chosen font, and you’re good to go.
How to Add Custom Font Code to a Kajabi Page (Quick Guide)
Previously, Kajabi restricted custom fonts to those on the Growth or Pro plans. However, this is no longer the case, and ALL plan subscribers can access this feature. Yay!
Also, this guide is the simplest way to add custom fonts to your Kajabi website. There are more complex and detailed ways to do it, and for those, I invite you to look at Kajabi’s Help Center articles.
1. Grab the embed code of your chosen font (more on where to find that below).
2. Open the Kajabi page editing tool with the page you want to add the custom font to
3. Select Add Section > Custom Code > Add.
4. The custom code section will be added to the bottom of the page, so scroll there and click to edit it.
5. Paste your code in the space provided in the sidebar.
6. Click Save.
The next step is to configure the CSS code for the font family.
8. Click the Back button until you reach the main sidebar menu.
9. Select Settings > Custom Code.
10. Copy/paste the following code into the CSS Code box:
h1, h2, h3, h4, p {
font-family: YOUR CODE HERE;
}
11. Now, head over to Google or Adobe fonts.
11. Copy the font family, weight, and style (I’ll show you where to find this below).
12. Go back to the Custom CSS box in Kajabi and replace the YOUR CODE HERE; text with your copied code.
13. Hit Save.
Your page will magically transform, and the new font will be applied!
What do you do if you want more than one custom font for your page?
Easy!
1. Add your first font by following all the steps above with one difference.
2. In the Custom CSS box, remove the “h” headings you don’t want the code to apply to.
3. To add a second font, follow the steps above again. Make sure you add a new Custom Code section to your web page and paste the embed code there.
4. In the Custom CSS box, add the necessary code for the second font underneath the existing code and adjust the “h” headings.
- So, font one should list all the “h” headings it applies to.
- Font two should list all remaining “h” headings.
5. Hit Save, and your page will update with all the new fonts.
Where to Find the Google Fonts Embed Code
I promised I’d show you where to find all these codes, so here’s the information!
You can find Google fonts at https://fonts.google.com.
1. Search for your preferred font and click on it.
2. Select Get Font.
3. Select <> Get Embed Code.
4. Make sure Web and <link> are highlighted and copy the embed code.
5. Add this to your Custom Code section on your Kajabi page.
6. Now, head to the CSS Class box.
7. Highlight the family, weight, and style code and copy it.
8. Do NOT copy the top and bottom lines of code.
9. Go paste this in the CSS box in Kajabi.
Where to Find the Adobe Fonts Embed Code
1. Click Browse All Fonts.
2. Select your preferred font and click the </> icon.
2. In the Add Fonts to a Web Project box, click Create a New Project.
4. Give your project a name and select Create.
5. The embed and CSS codes will now display. You can copy and paste them into Kajabi.
Adjust Your Kajabi Fonts with the Style Guide
There is a quick way to adjust the universal sizes and colors of your h1, h2, h3, etc. headings. So, whenever you select one of these headings when writing text on your web page, it will automatically format to your chosen style.
This means you don’t have to manually adjust every single piece of text each time you write it.
To do this, head to Settings > Style Guide and scroll down to the Fonts heading. You can customize everything here.
Custom Font Pitfalls to Watch Out For
Kajabi also does not offer any support for problems created by custom code.
If you’re worried about this, I recommend creating a duplicate of the web page you want to add custom code to. Leave the original as is, and make the adjustments to the duplicate.
Then, if something goes wrong, you can simply delete it and start over.
The only problem is that you cannot duplicate system-created pages (website home page, store page, etc.).
In this case, create a brand new page and test your code there before applying it to any system-created pages.
I also thoroughly recommend testing out new changes and making sure everything works. You can do this by “Previewing” your Kajabi pages. You will find this option up by the Save button in the editing tool.
Frequently Asked Questions
Where Can I Add Custom Fonts in Kajabi?
You can add custom fonts to any Kajabi web page, including website pages, landing pages, and funnel pages. It is not possible to add custom fonts to course or product pages.
Can I Use Custom Fonts for Other Languages?
Yes, you can use custom fonts for other languages in Kajabi by selecting and using one of Google’s “Noto” fonts. These fonts are specially created to support glyphs and symbols across 1,000 languages and writing systems.
Which Code Types Does Kajabi Accept for Custom Fonts?
Kajabi accepts HTML and CSS code for adding custom fonts.
