Back to Kajabi Contact Us

How to Add Custom Fonts

  • Updated
Learn how to add custom fonts to customize your pages.
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.

In this article:

Note:
Adding a custom font will populate the font across all text in the Page and will not be an option added to your Typography settings. To use different fonts for different sections of Text, read How to Use Google Fonts on your Page for details.

Website Theme

Step 1: Upload the font file

Note:
When adding your custom font, the font's filename should be all small letters and not include any special characters.

First, open the Code Editor for your Website Theme:

  • Open the Website tab from your dashboard.
  • Click Manage Themes.
  • Select … and choose Edit Code.

Then, upload your font file to your Code Editor:

  • 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:

Note:
If your site Homepage is set to a custom homepage, the Preview will not reflect the changes to your font. Be sure to upload your custom font into the Page you have set for your Homepage if you wish to populate the font on your custom page.

[back to top]

Page Theme

Step 1: Upload the font file

Note:
When adding your custom font, the font's filename should be all small letters and not include any special characters.
  • Open the Website tab from your dashboard.
  • Click Pages from the sidebar.
  • Select … on the page you want to work with 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:

Related articles