Build Your Course The Easy Way
Get Started Free

How to add custom fonts

Learn how to add custom fonts to your Kajabi pages.

In this article:


Note:
In order to access the theme editor, you must be on a Kajabi Pro account. Learn about our different plans here. These instructions will only work if you are using the most up to date version of the Premier theme. Learn how to update your theme here.

Website Theme

Step 1: Upload the font file

  • Open the Website tab from your dashboard.
  • Click Manage Themes.
  • Select and choose Edit Code.
  • Open the Assets folder.
  • Click Upload Asset and choose your font file or drag it into the uploader:

custom font 1

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; } - Save your changes. - Click Preview to confirm the typeface changes:

custom font 2


Page Theme

Step 1: Upload the font file

  • Open the Website tab from your dashboard.
  • Click Page Builder 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:

custom font 3

Step 2: override.scss.liquid

After successfully uploading the font file:

  • Open the override.scss.liquid folder.
  • Paste the following code at the very bottom of the override.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; } - Save your changes. - Click Preview to confirm the typeface changes:

custom font 4

Contact support or access our 24/7 Live Chat:

Contact Support Live Chat

Need Help? Live Chat with Us.