How to Add Custom Fonts

HelpCenter

Updated

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


In this article:


Completion of the steps in this guide requires working with HTML and CSS code. If you aren't familiar with HTML and CSS, we recommend consulting with a web design professional regarding the addition of embed code to your Kajabi site. Keep in mind that OTF files are not supported by Kajabi and cannot be uploaded.

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, the latest updates to the Kajabi page builder enable you to add custom fonts to your page without accessing the code editor.

Note:
If you are using the Legacy builder, Premier, custom fonts will require access to the code editor.

Adding your custom font will require a basic understanding of CSS. This guide will help you understand how to add custom code in order to add 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 update your HTML style elements to change the font on your page.

Now, let's talk about Headings and Heading tags.

You may have seen the short form for font heading sizes: H1, H2, H3, up to H6 on Kajabi.

Fullscreen_7_11_23__1_33_PM.jpg

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 let's start adding your custom font!

Note:
If you are using the Legacy builder, Premier, adding custom fonts will require access to the code editor.

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'll need to define the specific Heading tag that will take on the custom font style.

By defining a specific Heading tag, you can simply update that Heading tag throughout your page after adding your custom font to the Page Settings CSS.

To view and assign the Heading tag you wish to apply 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:

Tip:
Click the expand icon in your text editor to view your editor at a larger scale for easier viewing.

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 a Google Font to your page, click here to learn more about using Google Fonts on your page.

Note:
OTF files are not supported by Kajabi and cannot be uploaded onto your site.

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've purchased a font file and you have the license to use it, then you can use a .ttf, .eot, or .woff2 font file type on Kajabi (note: you can also upload a .woff file to a CTA button only).

Warning:
Introducing custom code to your site can open you up to vulnerabilities and potential malware attacks. We recommend using vulnerability tools like VirusTotal or Snyk to scan any custom code that you intend to use and apply certain best practices to help reduce potential impact.

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.

Tip:
Use an assets page to store various page assets for your site such as images, videos, font files, and other resources you may wish to use throughout your site on Kajabi.

Just be sure to keep your assets page unpublished so it will only be visible and accessible internally to 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.

Note:
When you input the sample code below, replace FontName, FONTFILENAME, and XXXXXX with the real name of your font file (examples: Arial, Helvetica, Garamond, etc.).

TTF 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;
  }

EOT code

If you are using an Embedded OpenType font file, replace the source line from the code above to contain the following information:

src: url('XXXXXX.eot') format('embedded-opentype');

WOFF2 code

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 (.ttf, .eot, .woff2) and paste it into the code provided above.

Note:
When you input the sample code below, replace FontName, FONTFILENAME, and the sample URL with the real name of your font file (examples: Arial, Helvetica, Garamond, etc.) and your real source URL.

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

D74A62FB-8608-469C-9234-5791CFA6075A.png

Note:
Ensure that your custom font displays on all web browsers with or without a custom domain connected to your site by removing the domain from the source url src: url in your code. By default, your link will include your Kajabi subdomain in the source url, but this may not accurately display your custom font if you have connected a custom domain to your site. Refer to the image above to create the correct custom code for your font. 

If your font file is an .eot file type, use the EOT font format code:

src: url('FONTFILENAME.eot') format('embedded-opentype');

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 code into the CSS code field.
  • Be sure to click Save to apply and view your custom font:

Kajabi_-__admin_themes_2154299046_settings_edit.jpg

Tip:
Want to add your custom font to multiple Heading tags? Locate the short form font size indicators (e.g., H3) in your CSS code and add your desired Heading tags with commas to separate the Heading tags. For example, if you want all of your Heading 1, 2, and 3s to display your custom font, your custom CSS would need to include H1, H2, and H3 in your code.

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 Header 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 custom font code, and then the closing style tag </style>directly below your custom font code.
Note:
When you input the sample code below, replace FontName and the sample URL with the real name of your font file (examples: Arial, Helvetica, Garamond, etc.) and your real source URL.

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:

Note:
If your existing pages do not contain your defined heading (in this case, our Heading 3 text), then the font will not load onto your page. 

Be sure to include the defined Heading tag for your custom font code in your website and landing pages to add your custom font to your pages:

If your custom font is not reflected in your page CTA buttons (.btn), form buttons (.form-btn), and footer, you will need to include the Body and Button font tags 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, .btn, .form-btn
{
font-family: 'FontName', sans-serif;
}

</style>

Be sure to replace FontName in the code sample above with your real font name and 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

Building your Kajabi Site

Discover the design potential for your website and landing pages.

Learn more

iStock-1180384660.jpg

And that's how to add custom fonts! Please vote below and let us know if you found this article helpful. We value your feedback. Thanks for being the best part of Kajabi!

Did you find this article helpful?