Match your page text to your brand with the Style Guide's built-in font settings, or add a custom font from Google Fonts, Adobe Fonts, or a licensed font file. The Style Guide also controls your page colors, buttons, and background.
Start with the Style Guide. If the font you want isn't there, add a custom font with code. You don't need access to the code editor or a specific Kajabi plan. If you build pages with the legacy Premier template, see Change fonts and colors in Premier page settings.
Customize fonts with the Style Guide
The Style Guide keeps your brand and style consistent across a page. Use it to choose fonts, set font colors, and size your text for desktop and mobile on pages built with the latest page editor.
Open the Style Guide
From the Dashboard, open the Website tab.
Navigate to either Website Pages or Landing Pages.
Select the page where you want to customize.
Open the page editor for your page. Learn how to access the Page Editor.
In the sidebar editor, open Settings.
Click Style Guide.
Note: Style Guide changes don't appear in the preview until you click Save. A Preview outdated badge shows while you have unsaved Style Guide changes.
Change your fonts
In the Font settings, select from a variety of font types, customize the font weight, and adjust the line height for your body text and headings.
From the Dashboard, open the Website tab.
Navigate to either Website Pages or Landing Pages.
Select the page where you want to customize.
Open the page editor for your page. Learn how to access the Page Editor.
In the sidebar editor, open Settings.
Click Style Guide.
Scroll down to the Fonts section.
Configure your font settings.
Set desktop and mobile font sizes
A big, bold heading can look great on desktop but awkward on a mobile device, where there's less screen space. Set separate font sizes for desktop and mobile so your page looks right on any device.
Kajabi uses standard web heading sizes. Heading 1 (h1) is generally the largest and works well for titles. Heading 2 (h2) is generally the next largest, and so on through Headings 3 (h3), 4 (h4), 5 (h5), and 6 (h6). Your Body size is the standard paragraph text, like the text you're reading now. By default, it's the paragraph or small text in a Text Block.
From the Dashboard, open the Website tab.
Navigate to either Website Pages or Landing Pages.
Select the page where you want to customize.
Open the page editor for your page. Learn how to access the Page Editor.
In the sidebar editor, open Settings.
Click Style Guide.
Scroll to the bottom of the sidebar editor and find Desktop Font Sizes and Mobile Font Sizes.
Click each dropdown menu and choose a size. Font sizes are listed in pixels, like in a word processing program.
Tip: Check your Desktop and Mobile font sizes with the matching Preview in the bottom right corner of the Template Editor.
Choose a custom color
To use a color that isn't in your site color palette, click the color wheel, then enter your RGB color code or use the sliders:
Use the square box to adjust the brightness and saturation
Use the horizontal rainbow bar to select the hue
Use the horizontal gradient bar to select the opacity
Add custom font with code
Before you begin
These requirements apply to adding a custom font with code. The Style Guide fonts above don't need any of them.
Know the basics of HTML and CSS, or work with a web design professional, because adding a font means pasting code into your page
Use a font file type Kajabi supports: .ttf, .woff, .woff2, or .eot
Make sure you have the license to use any font file you purchased
Know that OTF files aren't supported by Kajabi and can't be uploaded
With the Page Builder, you add custom font code to one page in its Custom Code settings, or to your whole website in Page scripts. Neither needs the code editor.
Warning: Custom code can open your site to vulnerabilities and malware. Scan any code you plan to use with a tool like VirusTotal or Snyk, and follow best practices for custom code to reduce the risk.
Understand HTML, CSS, and heading tags
What is an embed code?
An embed code is a code snippet created by a third party, such as Google Fonts, that lets you add content from an external source to your site. You paste it into a custom code field in the Page Builder.
Font embed codes are HTML or CSS. You don't need JavaScript to add a custom font.
HTML and CSS basics
HTML builds your page structure. Each piece of text on your page is an HTML element wrapped in tags. For example, a paragraph sits between an opening <p> tag and a closing </p> tag, like this: <p>Hello World!</p>. Visitors see only the text inside the tags.
CSS controls how each HTML element looks, including its font. For example, you can select one paragraph and turn its color green with CSS. You can change the font for a single text element or for every element of one type on your page. Add your CSS in the CSS Code field of your page's Custom Code settings.
Heading tags
Kajabi uses standard heading tags, H1 through H6, to define heading text. When you add a custom font, you choose which heading tag takes on that font. After the font code is in place, you can change that heading tag anywhere on your page to apply the font.
The heading's Font size and Style let you pick the exact text that gets your custom font:
Assign a heading tag to your text
From the Dashboard, open the Website tab.
Navigate to either Website Pages or Landing Pages.
Select the page you want to customize.
Select the Text block that contains the text you want to change.
Highlight the text in the text editor.
Click Formats in the text editor options.
Select Headings.
Select the heading tag you want to use for your custom font.
Click Save to apply your changes.
Tip: Click the expand icon (fullscreen) in your text editor to view your editor at a larger scale for easier viewing.
Add a Google Font or Adobe Font
Google Fonts and Adobe Fonts both give you embed code to copy into your page. The steps below use Google Fonts as the example. They work the same way for Adobe Fonts once you have your Adobe Font code. To get that code, see Get an Adobe Font embed code.
Add a font to an entire page
Use this method to apply your font to every heading 1, heading 2, heading 3, heading 4, and paragraph on a page.
Copy your Google Font embed code
Go to Google Fonts.
Click the font you want to use to open its details.
Scroll to the Styles section and find the font style you want.
Click the blue font style link to the right of the style to open the right sidebar menu (example link text: Regular 400).
In the "Use on the web" section, select the radio button next to <link>.
Copy the HTML code.
Paste the embed code into your page
In a new browser tab, log in to your Kajabi account.
From the Dashboard, open the Website tab.
Navigate to either Website Pages or Landing Pages.
Select the page where you want to add your custom font.
In the sidebar editor, click Add Section.
Select a Custom Code Section from the list, then click Add.
Open the Custom Code Block in the sidebar editor.
Paste your embed code into the Code field.
Add the CSS rule to your page
At the top of the left sidebar, click Back twice.
Open the Settings tab.
Click Custom Code.
In the CSS Code field, enter the following CSS:
h1, h2, h3, h4, p { font-family: YOUR CODE HERE; }
This rule applies your custom font to every heading 1, heading 2, heading 3, heading 4, and paragraph on your page. Add or remove HTML text elements as you like. Learn more about HTML headings and paragraphs.
Add your font family to the CSS rule
Return to Google Fonts in your other browser tab.
In the "Use on the web" section of the sidebar, find CSS rules to specify families.
Copy the CSS code.
Return to your Kajabi page.
Replace
YOUR CODE HEREwith the code you copied.Click Save to apply your font.
Note: Custom fonts added via CSS will not appear in Kajabi's built-in font dropdown.
Add a font to a single text element
Use this method to apply your font to one piece of text, such as a single heading, instead of the whole page.
Copy your Google Font import code
Go to Google Fonts.
Click the font you want to use to open its details.
Scroll to the Styles section and find the font style you want.
Click the blue font style link to the right of the style to open the right sidebar menu (example link text: Regular 400).
In the "Use on the web" section, select the radio button next to @import.
Copy the CSS code between the
<style>and</style>tags.
Paste the import code into your page settings
From the Dashboard, open the Website tab.
Navigate to either Website Pages or Landing Pages.
Select the page where you want to paste the code.
In the sidebar editor, click the Settings tab.
Click Custom Code.
In the CSS Code field, paste the code you copied from Google Fonts.
Click Save.
Add span tags to your text element
Select the Text Block that contains the text you want to change, or create a new Text Block.
In the sidebar editor, click the source code icon
<>in the Text editor.Copy this HTML snippet:
<span style="YOUR FONT FAMILY CODE HERE">Find the HTML text element you want to update.
Paste the snippet directly after the element's opening tag. For example, pasting after an
<h2>tag updates your heading 2 font.Add a closing span tag,
</span>, directly before the element's closing tag. For example:<h2><span style="YOUR FONT FAMILY CODE HERE">Text Here</span></h2>
Add your font family to the span tags
Return to Google Fonts in your other browser tab.
In the "Use on the web" section of the sidebar, find CSS rules to specify families.
Copy the CSS code.
Return to your Kajabi page.
Replace
YOUR FONT FAMILY CODE HEREwith the code you copied, keeping all quotation marks in place.Click Ok, then Save to apply your font.
Get an Adobe Font embed code
To add an Adobe Font, first get its embed code from Adobe Fonts. Then follow the Google Fonts steps above, using your Adobe Font code in place of the Google Fonts code.
Choose a new Adobe Font and copy its code
Go to Adobe Fonts.
Log in to your Adobe account, or create one.
Click Browse all fonts.
Select the font you want to use, then click the code icon
</>. If you don't see the code icon, check that you're logged in.In the "Add fonts to a Web Project" popup, click the dropdown arrow and select + Create a new project.
Enter a name for your web project, then click Create.
Copy the embed codes you need from the popup.
Find the code for a saved Adobe Font
If you already saved an Adobe Font to your account but can't find its code, follow these steps. For more detail on updating font CSS, see Adobe's guide to CSS selectors for fonts.
Go to Adobe Fonts.
Log in to your Adobe account.
In the upper right corner of your dashboard, click Manage fonts.
Select the Web Projects tab.
Find your first embed code in the Embed Project section.
Click the font image on the left to open your font-family CSS code.
Scroll to the Details section, then to How to Use.
Find your CSS code under Web.
Add a licensed font file to your entire website
If you've purchased a font and have the license to use it, you can upload a .ttf, .woff, .woff2, or .eot file to Kajabi and add it with custom code. Kajabi doesn't support OTF files. The examples below customize Heading 3 text.
To use your font on every page, add the font code to Page scripts instead of a single page's Custom Code settings. Use the font code you created in the previous section.
From the Dashboard, click Settings, then Site details.
Scroll to the Page scripts section.
In the Header Page Scripts field, paste your font code.
Add the opening style tag
<style>above your font code and the closing style tag</style>directly below it. 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>Replace
FontNamewith the name of your font and the sample URL with your own font file URL.Click Save to apply your font to every page on your site.
Note: Page scripts aren't included on offer checkout pages or upsell pages, so a font added this way doesn't load there.
Troubleshooting
Font doesn't appear on a page
Your font only loads on pages that contain the heading tag your code targets. In the examples above, that's Heading 3. If a page has no Heading 3 text, the font doesn't load. Add the heading tag from your font code to a Text Block on the page. To assign a heading tag, see Assign a heading tag to your text.
If your custom font is not displaying correctly on your Kajabi landing page, follow these steps:
Clear Browser Cache: If the font appears on the live page but not on your device, clear your browser cache and perform a hard refresh to load the latest assets.
Verify @font-face Rule: Ensure your
@font-faceCSS rule references a valid, accessible font file URL. Thefont-familyname in your CSS must exactly match the name defined in@font-face.## Changing Fonts in Widgets and Themes
Font doesn't appear on buttons, forms, or the footer
If your font doesn't show on Call to Action buttons (.btn), form buttons (.form-btn), or the footer, add the body and button font tags to your code. Your code should look similar to this:
<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>Replace FontName with your font name and the src: url value with your font file URL. In this example, the source URL is:
/resource_redirect/downloads/sites/135263/themes/2148980623/downloads/ea3IaDotWWurDhwu8x3Wd_cameliya.ttf
Customize page colors, buttons, and background with the Style Guide
The Style Guide also sets your primary color, page background, buttons, and error message colors. The background, button, and error message settings are only available in the website page editor. Learn more about building a website with Kajabi.
Change your primary color
Your Primary Color is used throughout your page, including the color of text buttons, social icons, and video play buttons. Set it to match your brand.
From the Dashboard, open the Website tab.
Navigate to either Website Pages or Landing Pages.
Select the page where you want to customize.
Open the page editor for your page. Learn how to access the Page Editor.
In the sidebar editor, open Settings.
Click Style Guide.
Click Primary Color.
Select a color from your site color palette, or choose a custom color.
Set a page background
In the General appearance settings, select a background image, a background color, or both to display across your entire page.
If your image doesn't show in the background, select Use Background Image and adjust the Section Background Settings for each section where you want the image to display.
Customize buttons
Design the look and feel of the buttons across your standard website pages:
To override your global button settings in a section, click the button in that section and change its settings there.
Button background color
Click Button background color and select a color from your site color palette, or choose a custom color.
Button text color
Pair your button background color with a different button text color. The button text color applies to solid buttons only. Click Button Text Color and select a color from your site color palette, or choose a custom color.
Button width
Adjust the width of your button:
Full: fills the width of the button area
Auto: adjusts the width to fit the text
Button style
Change the style of your button:
Solid colored button
Outline of your button background color
Button size
Adjust the size of your button to Small, Medium, or Large. Changing the size changes both the button background and the text size.
Button border radius
Make your button border look more rounded or more square. Enter a value in pixels, up to 50. A lower value looks more square, and a higher value looks more round.
Change error message colors
Customize the color of the error messages your visitors see if they run into an error on your page:
Change fonts and colors in Premier page settings
Note: This section covers the legacy Premier templates, which may be outdated. If you use Kajabi Pages Templates, see Customize fonts with the Style Guide.
Page settings set the default colors and fonts for a Premier page, so they stay consistent across the whole page. Adding a custom font to a Premier page requires access to the code editor. To do that, see Use a Google Font on a site with Premier.
Change the primary color on a Premier page
From the Dashboard, open the Website tab.
Select either Website Pages or Landing Pages.
Select the page you want to customize, or create a new Premier page.
Click Customize to open the template editor.
In the sidebar editor, click the Settings header.
Click Color Scheme.
Click the colored circle and select a color from your site color palette.
To use a custom color instead, click the color wheel, then enter your RGB color code or use the sliders:
Use the vertical bar to select the hue
Use the square box to select a color
Use the horizontal bar to select the transparency
Change font colors, size, and type on a Premier page
Typography settings include a wide variety of font types and font colors to brand your page.
From the Dashboard, open the Website tab.
Select either Website Pages or Landing Pages.
Select the page you want to customize, or create a new Premier page.
Click Customize to open the template editor.
In the sidebar editor, click the Settings header.
Click Typography.