Kajabi Tutorial: How to Load Custom Fonts to Your Kajabi Website
Kajabi allows you to use many different fonts in the Page Builder to make your page look awesome. You can also add your own special fonts using Google Fonts or a font file you have the rights to use, making your page really stand out.
No matter what Kajabi plan you're on, the newest updates to the Page Builder make it super easy to put your own fonts on your page without having to mess with any complicated coding.
However, putting in your own font needs a bit of know-how about CSS. But don't worry, we break it down real simple and show you how to add some custom code to get your fonts looking just right on your page.
So, what's CSS?
CSS is like the fashion designer for your webpage. It helps you dress up your HTML elements however you want. Say you want a paragraph on your page to be green; CSS is your go-to for making that happen.
With Kajabi's CSS Code Editor in the page builder, you can tweak your page's look, including changing up the fonts, by messing around with the HTML style stuff.
Adding Your Own Custom Fonts to Just One Landing Page
Trying to use the instructions from the Kajabi Help Center can get a bit tricky, I've heard. So, if you're looking to give a single landing page a makeover with a cool new font you've got, here's a step-by-step guide to help you add either a free or paid custom font file to your Kajabi site.
Items Needed:
- Font file downloaded to your computer - file types supported are: .ttf, .eot, or .woff2
- Script code available to copy below the video
Use this code if you want to change the BUTTON FONT ONLY
@font-face { font-family: 'FONT NAME'; src: url('FONT LINK') format('truetype'); } .btn, .form-btn {
EXAMPLE: @font-face { font-family: 'Feeling Passionate'; src: url('/resource_redirect/downloads/file-uploads/sites/2147534372/themes/2150341848/downloads/116ab4-2573-0262-fc5c-12f38bedda_FeelingPassionateRegular.ttf') format('truetype'); } .btn, .form-btn { |
Use this code if you want to change the HEADINGS, BODY, AND BUTTONS to all be the same font
@font-face { font-family: 'FONT NAME'; src: url('FONT LINK') format('truetype'); } h1, h2, h3, h4, h5, h6 { body, p, ul, ol, a, .btn, .form-btn {
EXAMPLE: @font-face { font-family: 'Feeling Passionate'; src: url('/resource_redirect/downloads/file-uploads/sites/2147534372/themes/2150341848/downloads/116ab4-2573-0262-fc5c-12f38bedda_FeelingPassionateRegular.ttf') format('truetype'); } h1, h2, h3, h4, h5, h6 { body, p, ul, ol, a, .btn, .form-btn { |
Additional CodesThe below codes can be added in if you needed them. Note that these are not complete codes. You will still need to have the @font-face part of the code included along with these additional codes. Link List Font .link-list__link { font-family: 'FONT NAME', sans-serif; } Dropdown Menu Font .dropdown__trigger { font-family: 'FONT NAME', sans-serif; } |
Quick Reference Notes
Part 1: UPLOAD THE FONT FILE TO KAJABI
- Create blank landing page in draft mode and called it "Assets Page - Don’t delete!"
- Add a textbox with CTA button.
- Write the name of the font in the text box and then change the styling to Header 1. (If you are loading the font to use with something other than Header 1 then chose that here instead)
- Upload the font to the CTA button.
- Save the page and open the preview page to use in Part 2.
PART 2 OPTION A: LANDING PAGE - ADD THE CODE TO A LANDING PAGE (SINGLE PAGE)
- On the landing page that you want to change the font on, go to SETTINGS then CUSTOM CODE. Copy and paste the code provided above on this page into the custom code section.
- Change the font name to your font in BOTH places where is says "FONT NAME" This must be the EXACT name with no spelling mistakes or extra spaces. Both places MUST MATCH.
- Go to the Assets Landing Page that you have opened in preview mode. Right click on the CTA Button that you loaded the font into, go to “Copy Link Address”.
- Back on the Landing Page Custom Code section, paste in the link address for the font into the script where it says to add the font link. Do NOT remove the apostrophes but DO REMOVE THE DOMAIN NAME before the /resource_redirect... part of the link. If you don't remove the domain name part of the link you will not see the custom font on the LIVE page. Trust me on this one... it's the MOST common mistake I see that people tell me the code isn't working. REMOVE THE DOMAIN NAME!
- Click on SAVE at the top of the Landing Page.
- Click on PREVIEW of the Landing Page. You should now see your new font on the page! If not, check out the below Common Mistakes to troubleshoot.
PART 2 OPTION B: ENTIRE SITE: ADD THE CODE TO ALL PAGES ON YOUR SITE (GLOBAL FONT)
**WATCH THIS VIDEO FOR FONTS ON YOUR ENTIRE WEBSITE
- On the main Kajabi Dashboard, go to SETTINGS, SITE DETAILS then scroll down to HEADER PAGE SCRIPTS. Open the Header Page Script area. If you have code in there already, scroll to the bottom.
- Type in: <style> This is the open tag to start the code and must be there if you are wanting the code to apply to your entire website.
- Right after the <style> tag that you typed, Copy and paste the CSS code provided above on this page.
- At the VERY END of the css code you just pasted in, add the close tag </style>. This will end the code. Without the open and close tags, the code will not work!
- Edit the CSS Code: Change the font name to your font in BOTH places where is says "FONT NAME" This must be the EXACT name with no spelling mistakes or extra spaces. Both places MUST MATCH.
- Go to the Assets Landing Page that you have opened in preview mode. Right click on the CTA Button that you loaded the font into, go to “Copy Link Address”.
- Back on the Header Page Scripts section in the Site Details Setting, paste in the link address for the font into the script where it says to add the font link. Do NOT remove the apostrophes but DO REMOVE THE DOMAIN NAME before the /resource_redirect... part of the link. If you don't remove the domain name part of the link you will not see the custom font on the LIVE page. Trust me on this one... it's the MOST common mistake I see that people tell me the code isn't working. REMOVE THE DOMAIN NAME!
- Click on SAVE at the top of the Settings Page.
- Go to the Assets Page you have in Preview Mode and REFRESH it. You should now see your new font on the page! If not, check out the below Common Mistakes to troubleshoot.
If the Code Doesn't Work Check These Common Mistakes:
- REMOVE THE DOMAIN NAME before the /resource_redirect... part of the URL. If you don't remove the domain name part of the URL you will see the custom font in preview but the live page will NOT show the custom font.
- Wrong font link in the code - Must be the exact link you get from the CTA button you made but WITHOUT the domain name attached to it.
- Missing the apostrophes around the font link address - These often get deleted by accident. The font link should have an apostrophe at the front and end of the link address.
- Missing some of the code or typos in the code
- If adding the code to the Header Page Scripts area, the code must start with <style> and end with </style> or the code will not work. Landing page Custom Code area does NOT use the <style>, </style> tags.
IF IT'S NOT WORKING... First try the code again from scratch. If that still doesn't work, reach out to me for help by booking an Unstuck Me Call.
Adding a Google Font to a Kajabi Website
Adding Google fonts requires adding some CSS code to, very much like uploading your own custom font. The only difference is you don't have to have the font file and you don't have to upload it to your Kajabi account. Head to this page to learn how to upload Google fonts to your Kajabi site.
