How to Add Your Custom Fonts on Any Plan

Cue the confetti! 🎉 You can now add custom fonts to your site onto any Kajabi plan! You used to only be able to add custom fonts on the highest pro plan, but that is no longer the case.

If you want to add your custom fonts, you’ll need to do some custom coding, but this blog post will walk you step-by-step through exactly what you need to.

Kajabi Font Options 

When it comes to the fonts you use on your Kajabi site, you’ve got three options:

Option 1 - Use the Google fonts that are pre-loaded into Kajabi (no code needed)
Option 2 - Download Google font files for ones that are not pre-loaded into Kajabi (code needed)
Option 3 - Use your own non-Google custom font files (code needed)

If you will be choosing option 2 or 3 and using font files, only certain file types will work in Kajabi. I recommend using TTF. If you have an OTF, WOFF, or other file type, you can convert it to TFF by using Convertio. You can click here to open up Convertio.

Where in Kajabi You Can Use Custom Fonts

In order to add the CSS code for your custom fonts, you’ll need to be able to access the “Custom Code” section underneath the Settings tab. That means you’ll be able to add your custom fonts in the following places:

✅Encore Website Pages (new website builder)
✅Encore Landing Pages
✅Most Custom Product Themes (i.e. Flix theme, Tahnee theme, etc. purchased from Penny in Your Pocket)

However, the following places do not have the Custom Code section to add your custom fonts:
❌Premier Website Pages (old website builder)
❌ Premier Landing Pages
❌Free Product Themes inside Kajabi (Premier Theme, Momentum Theme, etc.)

There is a workaround that allows you to add the custom code to apply to your entire site, but this means that it will auto-apply your fonts to all your website pages and the free product themes, but that means you can’t customize different fonts for different products. This blog post won’t go over that specific option, but instead will show you how to use the Custom Code section in the settings to add your custom fonts as it gives you a little more flexibility doing it this way!

Step-by-Step Process for Generating Your Custom Code

Here we go! Follow each step to get the custom code needed for your custom fonts. If you’d like a free editable Google doc version of these steps that allows you to fill in your specific font information, just head to courtneyibinger.com/fonts to grab it now! You can also scroll down the page to watch a YouTube video of this entire step-by-step process in action.

Step 1: Choose one font for your headings and one font for your paragraph text. 

Step 2: Download your custom font files from Google or wherever you purchased the font from (Creative Market, FontShop, DaFont, etc.)

Step 3: If the file types are not already in .ttf format, use Convertio to convert them to .ttf file types. Make sure the font files are uploaded to your Google Drive Assets folder for safekeeping.

Step 4: Make sure your .ttf files are named FontName.ttf (no spaces or extra characters) and saved to your Desktop or Downloads folder for easy uploading access!

Step 5: Create a blank landing page called “Assets Page” in Kajabi. Turn it to draft mode. Create a text box with all the headings and paragraph text.

Step 6: On the “Assets Page” create a Call to Action block. Write the name of the font for your headings in the button text with .ttf at the end. For the button action, choose “Download a File.” Upload your .ttf font file for your headings. Click Save.

Step 7: On the “Assets Page” create another Call to Action block. Write the name of your paragraph font in the button text with .ttf at the end. For the button action, choose “Download a File.” Upload your .ttf font file for your paragraph text. Click Save.

Step 8: Preview the landing page. Right click on the button you created for your heading font and click “Copy Link Address.” Paste the url in this google doc. Then, delete out your domain that comes before /resource_redirect…

Heading Font Src Url:

/resource_redirect/downloads/sites/154094/themes/2151673035/downloads/kDx8SjNSQiqqpcR7CMpF_BriceBoldSemiCondensed.ttf

Step 9: Preview the landing page. Right click on the button you created for your paragraph font and click “Copy Link Address.” Paste the url in this google doc. Then, delete out your domain that comes before /resource_redirect…

Paragraph Font Src Url:

/resource_redirect/downloads/sites/154094/themes/2151673035/downloads/5MsIMHxTSE6uu2IMnNB6_AktivGroteskCorpRegular.ttf

Step 10: Add your font name (delete any spaces or dashes) and the source url into the following snippet of code for your heading font. Then,add your font name (delete any spaces or dashes) and the source url into the following snippet of code for your paragraph font. (The highlighted places show where you add those in.) Then, if the font is serif, change the sans-serif to serif in the code. Finally, decide on whether you would like to use your heading font or paragraph font for your buttons and add that font name at the very end of the code after it says .btn {

@font-face
{
font-family: 'HeadingFontName';
src: url('pasteurlhere') format('truetype');
}
@font-face
{
font-family: 'ParagraphFontName';
src: url('pasteurlhere') format('truetype');
}

h1,
h2,
h3,
h4,
h5,
h6
{
font-family: 'HeadingFontName', arial, sans-serif;
font-weight: normal;
font-style: normal;
}

p,
ul,
ol,
a
{
font-family: 'ParagraphFontName', arial, sans-serif;
font-weight: normal;
font-style: normal;
}

.btn {
font-family: 'FontName', arial, sans-serif;
font-weight: normal;
font-style: normal;
}

FINAL CUSTOM CODE FOR FONTS

@font-face
{
font-family: 'BriceBoldSemiCondensed';
src: url('/resource_redirect/downloads/sites/154094/themes/2151673035/downloads/kDx8SjNSQiqqpcR7CMpF_BriceBoldSemiCondensed.ttf') format('truetype');
}
@font-face
{
font-family: 'ActivGroteskCorpRegular';
src: url('/resource_redirect/downloads/sites/154094/themes/2151673035/downloads/5MsIMHxTSE6uu2IMnNB6_AktivGroteskCorpRegular.ttf') format('truetype');
}

h1,
h2,
h3,
h4,
h5,
h6
{
font-family: 'BriceBoldSemiCondensed', arial, sans-serif;
font-weight: normal;
font-style: normal;
}

p,
ul,
ol,
a
{
font-family: 'ActivGroteskCorpRegular', arial, sans-serif;
font-weight: normal;
font-style: normal;
}

.btn {
font-family: 'ActivGroteskCorpRegular', arial, sans-serif;
font-weight: normal;
font-style: normal;
}

Step 11: Test it out! Go into the “Assets Page” you created. Click on “Settings” and then click on “Custom Code.”

Copy your custom code and paste in the box underneath “CSS Code.” Click Save.

Your headings & paragraph text should all change to your custom fonts after you click save!

Save this custom code because later on you will need to add it to your other website pages and your product!

Watch the Video Tutorial

Are you a visual learner? Watch me set up custom fonts on my own Kajabi website in this video tutorial.

Have you tried to add your custom fonts to your Kajabi site yet? I know it might feel overwhelming, but just take each step one at a time and you’ll be all set!

Don’t want to mess with installing your custom fonts at all? Just hire me for a Kajabi VIP Day and along with getting your course or membership set up, I’ll take care of getting your custom fonts added, too! Just head to courtneyibinger.com/call to set up a call to discuss your Kajabi needs.