Hey there! If you've ever looked at your Kajabi site and thought, "I wish I could use this gorgeous font instead of what's built in," then this is for you.

This tutorial walks you through how to upload and use a custom font in Kajabi, whether you're applying it to a landing page, a full website, or both.

 Want to watch the process step-by-step? This video walks you through everything I've written below!

Before You Start: What You’ll Need

1. A Kajabi website or landing page ready to customize (I’m demoing on my Rachel series designs, but this works on any template). 

2. Your font files. Kajabi supports TTF, EOT, and WOFF2. I recommend WOFF2 because it’s optimized for the web and helps page speed, while TTF/OTF are desktop-optimized.

3. A quick plan for where the font should apply: all headers, a specific header (like H2), the body, or a mix. You can preview your current assignments under Settings → Style Guide (Kajabi gives you a body font plus six header levels by default). 

Step 1: Upload Your Font Files to Kajabi (The Asset Hack)

1. Go to Landing Pages → New → choose Blank and name it something like Internal Assets. This page stays unpublished; it’s just a holding area for your font files. 

2. Delete the default section, add a Call to Action section, and set the button action to Download a file. Upload your first font file (e.g., Extra Light). Rename the button to match the file (e.g., “Extra Light”) so you can keep track. Repeat for italic, bold, and bold italic (or whichever weights you plan to use). 

3. Click Preview, right-click each button, and select Copy link address. Paste all of those URLs into your notes—we’ll need them for the code. 

Step 2: Declare Your Fonts with @font-face

We’ll add custom code to your page (or site) and “declare” each font weight/style individually using @font-face. Then we’ll apply the fonts to headers/body.

1. Open your landing page (or website) and click Customize → Settings → Custom Code. Add a few line breaks so you can paste at the top. 

2. For each uploaded file, paste an @font-face block. Replace the src URL with the one you copied, but trim everything before /resource_redirect (delete the domain and anything earlier). Set the format to 'woff2' (or the correct format for your file). Then repeat for each weight/style you need. 

@font-face {
  font-family: 'Signifier Extra Light';
  src: url('/resource_redirect/path-to-extra-light.woff2') format('woff2');
}

@font-face {
  font-family: 'Signifier Extra Light Italic';
  src: url('/resource_redirect/path-to-extra-light-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Signifier Medium';
  src: url('/resource_redirect/path-to-medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Signifier Medium Italic';
  src: url('/resource_redirect/path-to-medium-italic.woff2') format('woff2');
}

(Those family names are examples—use names that clearly match your files so you can target them easily.)

Step 3: Apply the Font to Body and/or Headers

You can apply the font globally to body text, to a single header (like H2), or to all headers. Use a sensible fallback—serif for serif fonts; sans-serif for sans.

/* Body font */
body {
  font-family: 'Signifier Extra Light', serif;
}

/* All headers */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Signifier Medium', serif;
}

/* Or just one header as needed (example: H2 only) */
h2 {
  font-family: 'Signifier Medium', serif;
}

Click Save and preview—your font should now be live wherever you applied it. 

Step 4: Get Real Italics and Bold (No Faux Styles)

By default, browsers may “fake” bold/italic by slanting or thickening your base font. Since you uploaded the real italic and bold files, let’s tell Kajabi to use them properly for the elements that need them. 

/* Use the true italic face for emphasized H2 text */
h2 em {
  font-family: 'Signifier Extra Light Italic', serif;
}

/* Use the true bold face for strong H2 text */
h2 strong {
  font-family: 'Signifier Medium', serif;
  font-weight: 500; /* prevent extra artificial thickening */
}

/* Bold + italic combo for H2 when needed */
h2 strong em,
h2 em strong {
  font-family: 'Signifier Medium Italic', serif;
  font-weight: 500;
}

Why set font-weight: 500;? If you don’t, Kajabi/the browser may add extra “faux” thickness on top of your uploaded bold face. Setting the numeric weight that matches your bold file (e.g., 500 for Medium) prevents that. 

Quick Reference: Common Weight Names → Numbers

Use the numeric value that matches your font file to avoid artificial bolding:

Step 5: Apply the Same Code to Your Full Website

1. Go to Website → Customize → Settings → Custom Code.

2. Paste the same @font-face blocks and the body/header rules you used on the landing page.

3. Save and preview your site—your custom font styling will carry over globally. 

That’s a Wrap

You just uploaded custom fonts to Kajabi, applied them to body and headers, and set up true bold/italic—no faux styles and no sluggish load times. If this helped, subscribe for more quick Kajabi wins, and keep an eye out for my next tutorial on adding designer-quality icons to your Kajabi pages.