Note:
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 Page Builder lets you 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, which lets you add custom fonts to your page.
Cascading Style Sheets (CSS)
CSS is a style sheet language that 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.
The CSS Code Editor, available with the Page Builder, lets you update your HTML style elements to change the fonts on your page.
Headings and Heading tags
The element tags for font Heading sizes are H1, H2, H3, H4, H5, H6. Understanding Heading tags and how to change them on your Kajabi page prepares you with the necessary knowledge for adding custom fonts to your page.
Recognizing the differences between each Heading tag will be helpful when adding your custom font.
Font size and Style lets you specify the exact text to apply your custom font to:
Add a custom font for Headings
Note:
If you are using the Legacy builder, Premier, adding custom fonts will require access to the code editor.
How to select your Heading tag
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.
Select the Heading tag you wish to use for your custom font.
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.
How to 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 wish 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
Follow the steps below to use your licensed font file on your page built with Kajabi. In this example, we will 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.
How to upload your licensed font file to your newly created page:
First, create an assets page in your Kajabi landing page folder so you can reference it directly from Kajabi.
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:
Tip:
Use an Assets page to store various page assets for your site, such as images, videos, font files, and other resources.
Be sure to keep your Assets page unpublished so that it is only visible and accessible internally to you and your team.
How to add your licensed font file to your page
To add your licensed font file to your page, you will need to add custom code to your site with Kajabi's 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.
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');
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:
4. 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'):
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.
5. 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');
6. 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.
To add the custom code:
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.
After adding your font file to your Assets page, preview the page.
Tip:
Want to add your custom font to multiple Heading tags? Locate the short form font size tags (e.g., H3) in your CSS code and add your desired Heading tags with commas to separate them.
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.
Use your Site Settings to apply code to your entire website. By using the custom font code created earlier, you can add it to your Settings rather than to an individual page.
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
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>
6. 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