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. Check out How to Use Google Fonts to customize individual sections of text on your page. Click here to learn how to apply two custom fonts for your heading and body text.
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
Assetsfolder. - 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.liquidfolder. - Paste the following code at the very bottom of the
styles.scss.liquidfile 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.
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
Assetsfolder. - 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.liquidfolder. - Paste the following code at the very bottom of the
styles.scss.liquidfile 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:
Product 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 Product Theme. Then,
- Open the Products tab from your Dashboard.
- Select the Product you wish to edit.
- Click Customize.
- Select
…next to your desired Product Theme and choose Edit Code.
Then, upload your font file to your Code Editor:
- Open the
Assetsfolder. - 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.liquidfolder. - Paste the following code at the very bottom of the
styles.scss.liquidfile 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:
