Customizing Kajabi Fonts and Why It Matters to Your Business

Customizing Kajabi Fonts - Blog Image

Customizing your Kajabi fonts might seem like a small act of making your website unique. But it makes a big difference. Your Kajabi font can add a lot to the look and feel of your website.

I’ll tell you the importance of your website’s typography and the step-by-step process of how to personalize it on your Kajabi site. In addition, I’ll guide you on how to add custom fonts regardless of your Kajabi plan.

Ready?

Why Typography Matters

Before I guide you through the process, I want to share these three reasons why changing your fonts on Kajabi pages is essential to your online business.

1. Legibility

Readability plays a huge factor in delivering your message to your audience. Content that is hard to read, even though it’s well-written, will not keep the readers engaged.

And as someone running an online business, this can affect your sales conversion. If your readers feel uncomfortable with the font type, style, and color, plus the spacing you used, they won’t finish reading your copy.

So when choosing your website’s body and heading fonts, remember that “less is more.” Don’t make your fonts too colorful or big. Instead, choose the right size (around 16 px), and pick one to two solid colors (one for your heading then for the body.) Learning about the perfect typography combination is also a good way to avoid using fonts that look awkward with each other.

Here’s an example of good typography:

example of good typography from vhdesign.com

And a bad one:

example of bad typography

2. Branding

A brand refers to the image that represents your business or product. Most people think about logos or site colors when it comes to branding. However, your fonts are also part of your brand. They reflect how you want your audience to see and remember you.

Choosing the right fonts will exude your preferred vibe and set the mood for your website. So if you want to be viewed as someone professional, using Helvetica, Futura, or sans serif fonts will be the best choice.

On the other hand, if you want your site to look accommodating, you can use fonts like Playtime or Fredoka One.

Playtime or Fredoka One Fonts

3. Order of Importance

Typography hierarchy refers to how the text elements appear in a document. It typically includes the headings, subtitles, and paragraphs. This hierarchy indicates what the audience needs to focus on a page and what parts they can skip.

To make the order obvious, you can change the font color of the headings and make it bigger than the subheadings and the body. This way, the readers will automatically identify the important parts.

Here’s a good example:

example picture of a page with Order of Importance structure

Now that you know how important your fonts are, it’s time to change yours and get your website looking its best.

How Can I Change Fonts in Kajabi?

Choosing the right font for your business is easy with Kajabi. It has a selection of some of the most common and professional-looking fonts you can use.

To change your fonts, follow these steps closely:

On your Kajabi site, open the “Website” tab from the dashboard.

Website tab from the Kajabi dashboard

Click the “Pages” tab. You should first set up your website theme to see your pages in this section.

kajabi pages tab

Select the page you wish to customize. For this example, let’s use the “About” page.

kajabi about tab

It will show you the site details section. Click the Site “Settings” tab on the right sidebar.

kajabi dashboard settings style
Select the “Style Guide” tab
Kajabi Style Guide Tab

Go to the “Fonts” section by scrolling down a little, and you’ll see all the font configurations like the body and heading font-weight and line height.

Kajabi Fonts Section

Other Typography Settings Under Style Guide

Under the “Font” section, you can also change the following:

  • Font Color. Kajabi allows you to change the body, secondary body, placeholder, and heading font colors. Changing these helps you emphasize the content hierarchy to the readers.
  • Desktop and Mobile Font Sizes. Aside from the font colors and font-weight, you can also change the desktop and mobile font sizes. You can configure the heading font sizes from H1 to H6 and the body text size here. H1 refers to the main title, H2-H6 are the subtitles, and the body pertains to paragraph text and text blocks.
  • Error Message. Whenever there’s an issue with your website, an error message will show. You may change the text and background color under the “Style Guide” to match your brand or make it unique.
Screenshot from image.kajabi.com

How to Add Google Fonts to Kajabi

Google has a collection of over 915 fonts, and they are all free to download and use for your website.

Adding Google fonts on the code editor is only allowed on Kajabi’s Pro Plan. However, you can still add Google fonts by embedding them on the custom code of your page. That’s what I’m going to teach you.

It might sound a little complicated, but follow the steps below, and you’ll be able to do it in a few minutes!

Select your preferred Google font.

open sans from google fonts

Scroll down and check which of the following style you’d like to use. Click “+ Select this Style”.

screenshot from google fonts under open sans family font

Select the icon on the right side of the “Download Family” button. A sidebar will appear after that.

screenshot from google font download family of open sans

Click “Import” and copy the code below.

screenshot from google font download family of open sans importing file

Go to your Kajabi website and open the “Website” tab from the dashboard.

kajabi website tab
Select the “Pages” tab and choose which page you’d like to add the font. Click “Customize.”

You can also do this on your Kajabi landing page or pipeline. But for this example, I’ll customize the “Home” page under the “Website” page builder.

customize the Home page under the Website page builder

Click the Site “Settings” tab on the right sidebar. Then select “Custom Code” to add the custom font.

screenshot from kajabi dashboard underl pages section

On the Custom CSS bar, paste the code of the Google font on the “CSS Code” section. Then click “Save.” This action will save your custom font on your website’s system.

screenshot from kajabi dashboard customizing css bar or code

Select the text on your page where you want to use that font.

screenshot from kajabi dashboard customizing kajabi font part

On the right sidebar, click the “Source Code” icon (<>).

screenshot from kajabi dashboard customizing kajabi font part 2

Add this code (<span style=”ENTER SECOND PIECE OF CODE HERE”>) to the heading code or the body code. Kajabi provides this code to activate the custom font. Remember to put it after the opening code. For example, if you want to change the font of your paragraph text, you can insert the code after “<p>.”

editing kajabi dashboard font code when customizing kajabi fonts

Go back to Google and copy the code under “CSS rules to specify families.”

customizing kajabi fonts css rules to specifcy on google fonts

Go back to the source code and replace the “ENTER SECOND PIECE OF CODE HERE” with the newly copied code. Click “Ok” to save.

kajabi source code

Your custom font will reflect on your chosen text immediately.

final output customizing kajabi fonts

How to Add Custom Fonts

Aside from Google fonts, Kajabi also allows other free and paid custom fonts like Adobe. You can follow the instructions above and embed the custom font on your landing page or pipeline.

Just click your Pipeline page builder tab or Pipelines page builder tab, and open the “Custom Code” under site “Settings.”

Create an Assets Page where you can upload a licensed font file. Kajabi provides different CSS codes depending on your font format code type. You can view the following here.

Conclusion

Customizing Kajabi fonts is a simple yet powerful way to increase traffic and conversions on web and landing pages. In an era where many websites look similar, customized fonts can make your company stand out from the competition.

So if you want to change your fonts the easiest way possible on Kajabi, feel free to bookmark this article.

Also, if you haven’t tried out the Kajabi platform yet, sign up today! Our readers get a 30-day extended trial instead of the standard 14-day trial!

This trial deal is as good as it’s going to get (unless they do a special Kajabi offer this year’s holiday season).

Kajabi Frequently Asked Questions:

Scroll to Top

Wait! Test Drive Kajabi FREE for 30-Days!

(Our Readers Get 30 Days Instead of a 14 Day Trial!)