C U S T O M F O N T S

Custom fonts are a great way to add a unique look to your site. You can customize the font used for all headers and base font (the content areas) through your website and page theme code editor.

In this page you will learn how to add custom fonts in your Kajabi Pages:

Note:

When adding your custom font, the font file name should all be in lower-case letters and should not include any special characters. The font file should also be in a supported file format (e.g., html, liquid, css, scss, js, jpg, gif, png, ico, swf, svg, eot, ttf, or woff2).

Learn how to add custom fonts to your Website and Page theme.

R E A D

See the common upload errors and how to troubleshoot them.

R E A D

IMPORTANT NOTE: Adding custom fonts to your site pages requires access to the Code Editor only available with Pro Plans. Learn more about our different pricing plans at kajabi.com/pricing.

Step 1: Upload the font file

Open the Website tab from your dashboard.
Click Manage Themes or if it's for a stand alone page, Click Pages from the sidebar.
Select … and choose Edit Code.
Open the Assets folder.
Click Upload Asset and choose your font file or drag it into the uploader

Step 2: styles.scss.liquid

After successfully uploading the font file:

Open the styles.scss.liquid folder.
Paste the following code at the very bottom of the styles.scss.liquid file replacing "yourfontname.ttf" with your custom font file name:

@font-face { font-family: "MyFont"; src: url({{ 'yourfontname.ttf' | asset_url }}); } body, p, h1, h2, h3, h4, h5, h6, ul, ol, a { font-family: "MyFont", sans-serif; }

Click Save to keep your changes.
Click Preview to confirm the typeface changes