Kajabi Tutorial
How to Load Custom Fonts to Your Kajabi Website
Follow this step-by-step tutorial to learn how to add your own paid or free custom font file to your Kajabi website.
Items Needed:
- Font file downloaded to your computer - file types supported are: .ttf, .eot, or .woff2
- Script code available to copy below the video
*IMPORTANT NOTE*
This video will show you how to load the custom font to ONE SINGLE LANDING PAGE. If you are wanting to have the custom font apply to your entire website, then you'll need to watch this additional video AFTER you have watched the landing page video as it will show you the extra steps needed to apply the font to your entire website.
Use this code if you want to change the
HEADINGS ONLY
@font-face
{ font-family: 'FONT NAME'; src: url('FONT LINK') format('truetype'); }
h1, h2, h3, h4, h5, h6 {
font-family: 'FONT NAME', sans-serif; }
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 {
font-family: 'Feeling Passionate', sans-serif; }
Use this code if you want to change the
BODY FONT ONLY
@font-face
{ font-family: 'FONT NAME'; src: url('FONT LINK') format('truetype'); }
body, p, ul, ol, a {
font-family: 'FONT NAME', sans-serif; }
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'); }
body, p, ul, ol, a {
font-family: 'Feeling Passionate', sans-serif; }
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 {
font-family: 'FONT NAME', sans-serif; }
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 {
font-family: 'Feeling Passionate', sans-serif; }
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 {
font-family: 'FONT NAME', sans-serif; }
body, p, ul, ol, a, .btn, .form-btn {
font-family: 'FONT NAME', sans-serif; }
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 {
font-family: 'Feeling Passionate', sans-serif; }
body, p, ul, ol, a, .btn, .form-btn {
font-family: 'Feeling Passionate', sans-serif; }
Additional Codes
The 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; }
