How to Add Custom Fonts

Learn to add custom fonts to customize your pages with Kajabi's page builder.

In this article:

• Custom fonts
• Custom font for headings
• Custom font across your website

Custom fonts

Kajabi offers many native fonts with the Page Builder, however, Kajabi also gives you the ability to use custom fonts with Google fonts or a licensed font file to design a uniquely branded page.

Regardless of your Kajabi plan, you can add custom fonts to your page without requiring access to the code editor with the latest updates to the Kajabi page builder.

Adding your custom font will require a basic understanding of styling. This guide can help you better understand how to add custom code to add your custom fonts to your page. 

First, let's talk about CSS.

CSS is a style sheet language. CSS is used to selectively style your HTML elements. For example, you can select a specific paragraph text within your page and change the color to green with CSS.

With Kajabi's CSS Code Editor available with the page builder you can enter your style HTML elements to change the font on your page.

Now, let's talk about headings and heading tags.

You may have seen the short form of font size and style: H1, H2, H3 up to H6 on Kajabi.

Recognizing the differences between each heading tag will be helpful when adding your custom font.

With the short form of font size and style, you can specify the exact text to apply your custom font to:

Understanding heading tags and how to change them on your Kajabi page will prepare you with the necessary knowledge for adding your custom font to your page.

Custom font for headings 

Now that we have a better understanding of adding a custom font to your page, let's start adding your custom font!

Step 1. Select your heading tag

As previously outlined, Kajabi uses standard heading tags to define your heading text.

When adding your custom font to your page, you will want to define the specific heading tag that will take on the custom font style.

By defining a specific heading tag you can simply select the heading tag throughout your page after adding your custom font to your page settings custom CSS.

To view and assign the heading tag you wish to add your custom font to:

• Open the Website tab from your Dashboard.
• Click Pages.
• Click into the page you wish to edit.
• Select the text block containing the text you wish to add your custom font to.
• Highlight the specific text in the text editor.
• Then, click Formats from the text editor options.
• Select Headings.
• And select the Heading tag you want to use for your custom font.
• Be sure to click Save to keep and apply your changes:

Step 2. Add your custom font

With Kajabi's page builder you can use Google Fonts or a licensed font file to add your custom font to your selected heading tag.

If you are looking to add your selected Google Font to your page, click here to learn more about using Google Fonts on your page.

Licensed font file

Want to add your licensed font file? Follow the guide below to use your licensed font file on your page built with Kajabi.

In this example, we are going to customize our heading 3 text.

If you have purchased a font file and you have the license to use it then you can use a ttf, woff, or woff2 font file type on Kajabi. 

First, create an assets page in your Kajabi Landing page folder so you can reference it directly from Kajabi. 

Learn to create a landing page.

Then, upload your licensed font file to your newly created page:

• Open your Assets page and add a Call to Action block.
• Write the name of your font file in the Button text (e.g., Cameliya.ttf).
• Then, select Download a file for the Button Action.
• Upload your font file.
• Then, click Save:

Adding your licensed font file to an assets page adds your file into the Kajabi system so that you can easily reference it later.

Just be sure to keep your assets page unpublished and it will only be visible and accessible internally by you and your team. Learn to unpublish your page.

Now, after adding your font file to your assets page, preview the page. Click here to learn how to preview your page.

To add your licensed font file to your page you will need to add custom code to your site with Kajabi's latest page builder.

If you are familiar with adding Google Fonts to your page, you will notice that the code used to add your licensed font file is similar to the code used for your Google Font. Learn to add Google Fonts to your page

Recognizing the similarities can be beneficial in order to better add and change your custom font whether you choose to use Google Fonts or a licensed font file.

Font format code

If you are using a TrueType font file, the following code will be added to your page:

  @font-face
  {
  font-family: 'FontName';
  src: url('FONTFILENAME.ttf') format('truetype');
  }
  h1
  {
  font-family: 'FontName', sans-serif;
  }

Other font format code

If you are using a WOFF font file, replace the source line from the code above to contain the following information: 

src: url('XXXXXX.woff') format('WOFF');

If you are using a WOFF2 font file, replace the source line from the code above to contain the following information: 

src: url('XXXXXX.woff2') format('WOFF2');

To add your font file to your page, you will first need to copy the link address from your call to action button:

• Right-click your Call to action button from your newly created assets page. 
• Then, copy the link address:

Now that you have copied the font file, use the appropriate code based on your font file type (i.e., ttf, woff, woff2), and paste it into the code provided above.

For example, if you have a ttf file add your font file link address within the parentheses to define your source address ('FONTFILENAME.ttf'):

If your font file is a woff file type, use the woff font format code:

src: url('FONTFILENAME.woff') format('WOFF');

Similarly, if you are using a woff2 font file, use the woff2 font format code:

src: url('FONTFILENAME.woff2') format('WOFF2');

After adding your font file's link address to your custom font code, navigate back to the landing page where you want to add your custom font.

In your page editor:

• Open Settings.
• Click Custom code.
• Then, add your copied custom code containing your font file coding into the CSS code field.
• Be sure to click Save to apply and view your custom font:

Custom font for the entire website

Create a consistent brand with your custom font by adding it to every new page created on your website.

With Kajabi you can use your site settings to apply code to your entire website. By using the custom font code created in the previous section of this guide you can add your custom code to your Settings rather than to an individual page.

To create your custom font, refer to the custom fonts for headings section of this guide.

Then, add your custom font to your site settings:

• Open the Settings tab from your Dashboard.
• Click Site Details. 
• Then, navigate to Page Scripts.
• In the Page Scripts field, add your custom font code created in the previous section of this article. 
• Add style tags to your code. First, the opening style tag, <style>above your added custom font code, and the closing style tag, </style>directly below your custom font code.

For example:

<style>

@font-face 
{ 
font-family: 'FontName'; 
src: url('/
resource_redirect/downloads/sites/135263/
themes/2148980623/downloads/
ea3IaDotWWurDhwu8x3Wd_cameliya.ttf') format('truetype'); 
} 
h3
{ 
font-family: 'FontName', sans-serif; 
}

</style>

• Then, click Save to apply your custom font to new pages created on your site:

Be sure to include your defined heading tag to your text from your custom font code to your website and landing pages to add your custom font to your page:

If your custom font is not reflected in your page buttons and footer, you will need to include the body font tag in your code. Your code should look similar to the following code:

<style>

@font-face 
{ 
font-family: 'FontName'; 
src: url('/
resource_redirect/downloads/sites/135263/
themes/2148980623/downloads/
ea3IaDotWWurDhwu8x3Wd_cameliya.ttf') format('truetype'); 
} 
body, p, ul, ol, a
{ 
font-family: 'FontName', sans-serif; 
}

</style>

Be sure to replace the src: url in the code with your font file url. For this example, our source url is the following,

/resource_redirect/downloads/sites/135263/
themes/2148980623/downloads/ea3IaDotWWurDhwu8x3Wd_cameliya.ttf