Add your custom fonts on Kajabi without coding.

I have just finished coding a landing page theme for kajabi, which will allow the user to use their own branded fonts without writing any code.

Why would we want to use a custom theme when kajabi already has a nice way to add our fonts to the website/landing pages?

Well, there are a few reasons. First, we don’t need to write a code; secondly, using the kajabi help centre method adds extra weight to our pages by loading both the custom font and 2 default fonts which is negligible though.

However, in modern web experience, every bit and byte counts. It slows down the landing page's load time slightly for loading each font, whether or not we use it.

If we use custom code to customise the font, it loads both the default google fonts offered in kajabi and loads the fonts we manually add. So, it adds some unnecessary weight to the page, which contributes to search engine visibility and user experience.

And third is the user experience. I came across many beautifully designed websites with perfectly branded visual styles, some of which use PNG images in place of text for cursive fonts, which is unfortunately not the best practice. Not good for SEO since google’s bot doesn’t see that as text content and is not easily changeable. Going back to canva or photoshop for updating a text is not the most efficient way.

Spacially if you are a kajabi theme designer, it will be a hassle for your customers to go to canvas or photoshop each time they need to change the content of their website using your theme. You can easily use this codebase to enable your customers to upload their own branded fonts.

Enough reasoning. Let’s get into action.

A step-by-step guide on how to use the template. (Or you can just follow the video) 

Step 1: Click here to download the theme from the form below. It's a blank kajabi landing page theme with some power options to let you upload your font files.

Download the theme

Step 2: Once you finished downloading the theme, upload the theme as a new landing page, as shown in the image below.

Step 3: Open the settings menu after uploading the blank theme as a landing page. You'll find a custom fonts section. We have the option to upload up to 3 fonts, even though 2 is enough. The 3rd font is usually used as the accent font or special text.

Let’s go through the options.

Font name: Write the name of your font here. Make sure there is no space in the name we can use Uppercase, lowercase, Underscores (_), dashes (-) but no space.

Upload WOFF 2 file: If your designer delivered you with a font package that has web font options, you probably have a WOFF 2 or WOFF file in the package. (WOFF stands for web open font format, by the way) these file types are specifically made for rendering the fonts on websites efficiently.

So, if you have a WOFF2 font file, click on the CTA dropdown and select download a file. And simply upload your font file.

The same goes for the WOFF file. When you have both formats, upload both. If you have either of them, upload that one in its place.

It’s totally fine if you don’t have a web-specific font, we have the option to upload commonly used TTF and/or OTF files. Most modern web browsers support that formats.

Alternatively, you can hire me to convert your font files into a web font. Or you can do it by yourself (I will write a guide for that soon)

Repeat the process for the rest of the file format (EOT, TTF, OTF) if you have the file format upload it, if you don't have it leave the option blank as go to URL 

 Once you finish uploading the files, the fonts are ready to use. 

The next step is to activate the fonts.

Go to the style guide in settings and enable the font for either headers or body, just like kajabi default fonts. And make sure to write the same name of the font as you wrote during uploading.

Caution: If you activate the font, don’t leave the name of the font blank.

You have both options open to either using kajabi default fonts or your fonts or mixing both.

I will update the theme and email you the new version soon with those bugs fixed and an improved interface.

For any queries hit me up at [email protected] 

Personal note: Don't mind the website. It's still under construction. However, I'd appreciate your opinions or suggestions on the design and copy since I'm a terrible designer and writer.