How to Add Your Custom Font to Your Kajabi Website
Welcome, website owners and designers!
Are you looking to enhance the visual appeal of your Kajabi website and make it stand out from the crowd? Adding a custom font is a great way to do just that. In this blog post, I'll walk you through the process of adding your own custom font to your Kajabi website. By the end of this post, you'll be able to add a unique touch to your website and create a consistent brand image that will leave a lasting impression on your audience. So let's get started!
Choose Your Font
For this tutorial, make sure that you are the owner of the font you want to upload onto your Kajabi website. My favorite place to shop for fonts is Creative Market! They have hundreds of font styles to choose from that will give your brand the look you want. Another great option is Google Fonts you can check them out HERE.
( Note: font files must be in .woff, .woff2, .ttf, or .eot format)
Once you have unpacked your zip file (meaning...moved the files in the zip file to a new folder or on your desktop) you are ready to go! (if you are not a code guru, that's okay because this is super easy...I promise)
Create Your Asset Page
Inside Kajabi things are a little unconventional when it comes to customizations. So a great work around is to create a landing page that stores all your custom information so it will communicate with the rest of your site. Make sure to keep this landing page in draft mode. Nobody wants to see what's in the closet if you know what I mean *wink wink.
Create a button and label it your font name so you can remember what it is later. Then click "Button Action" "Download File" and upload your font file. Then click save. Make sure to preview your page and save the link address for your font for later. (You can copy the link by right clicking on the button and click "Copy link address" )
Add Your Custom Code
Just a reminder that the below code only applies to your website. To add your font to landing pages it requires a different code.
Go to Settings > Site Details and scroll down to Header Page Script.
Copy the code below and replace the bold text with your font name and and the font link address you created.
*Note: Make make sure to remove the first part of the url from the front of the link address. ( i.e. https://yourwebsite.mykajabi.com). This is very important if you have custom domain. Your font won’t appear on all browsers if you don’t remove this part.)
@font-face
{
font-family: 'YOURFONT';
src: url('FONTADDRESSGOESHERE') format('truetype');
}
h1, h2, h3, h4, h5, h6
{
font-family: 'YOURFONT', sans-serif;
}
</style>
And hit SAVE! You did it. Refresh the page and enjoy your new custom font on your Kajabi website.
If you need support with your Kajabi website drop a comment or by sending me a message on Facebook.
FOLLOW ON SOCIAL MEDIA:
