The Kajabi Custom Font Conundrum
You’ve finally found the perfect font that complements your brand, and you can’t wait to upload it to Kajabi so that your website has that extra dash of elan. Once it’s uploaded, you preview your home page, and … what the heck? The page takes forever to load and you see the Kajabi font in your headline transition to your gorgeous custom font in slow motion. And it’s ugly. Your mood deflates faster than yesterday’s party balloon. So what’s a Kajabian supposed to do?
Squeeze that Lemon for Kajabi Gold
This is the first in a series of my “Lemon Blogs” in which I share how to turn common website challenges from being a lemon to Kajabi gold. The kind of challenges that happen after you’re excited about work you’ve created, only to discover that your video, newsletter, or page design has turned into a big, hot mess. Before you give up and throw hours of effort away, try and turn that lemon into gold. Or at least a pretty lemon with some shine on it.
Not Every Kajabi Page Acts the Same
A lot of us use custom fonts to give our sites a more polished look, communicate what our brand is about, and help our readers transition from one topic to another. It didn’t take me long to discover that a custom font doesn’t always work well at the top of a page. On some pages, the headings were perfect and on others, they looked like a dog’s dinner. If the same happens to you, try one of these three tips to solve the problem.
Shortcut to Kajabi's Custom Font Tutorial
Are you adding custom fonts to your Kajabi website? Use this link here to watch Kajabi's Help Center Tutorial "How To Add Custom Fonts.
Use Animations
If you use animations such as fading in text or images on your Kajabi site, consider an animation for your custom font headline text. Set the text to delay just half of a second so that when your headline appears at the top of the page, it shows up in its beautiful custom font. Keep in mind that animations may slow down the load time of your page. Animations for text are found in the text block settings.
Avoid Custom Font at the Top of Pages
When you import your custom code, set it to show at the second (H2) or third (H3) header level. That way it won’t show in your top-of-the-page headline and the page should load faster. You’ll have no problem as you scroll down the page because the secondary headings with custom font will have had time to load.
Avoid Custom Fonts Altogether
This solution makes my design heart weep. However, I do understand that some people are fine without a custom font and find a faster page loading time more important. In that case, you can experiment with using italics or bold text to give your copy some more design interest for the reader.
Pros & Cons of Custom Fonts
What to consider before buying and adding a custom font to your Kajabi website.
Style 🌷🌷🌷🌷🌷
Branding 🌷🌷🌷🌷🌷
User Experience 🌷🌷🌷🌷
Cost 🌷🌷🌷
Page Load Speed 🌷🌷
Get Creative
Before you worry about wasting money on a custom font that doesn’t work, try one of these workarounds and decide if it works for your situation. There's nothing better than boosting one's mood when finding creative solutions to the problems we face, is there?
Sara Smits van Oyen
I’m a Kajabi Specialist who's been on a professional journey that's spanned over 30 years in finance roles before finding the sweet spot of helping lifestyle entrepreneurs share their unique gifts with the world. I’m a mood creator and client journey geek who loves to help her clients shine in the spotlight so that they can focus on taking great care of themselves and their clients.
#block-1694873394061 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1694873394061 .block { border: 4px black; border-radius: 0px; background-color: #efe0e2; padding: 0px; padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } @media (min-width: 768px) { #block-1694873394061 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1694873394061 .block { padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } } @media (max-width: 767px) { #block-1694873394061 { text-align: left; } } #block-1577982541036_0 .btn { margin-top: 1rem; } #block-1694873497033 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1694873497033 .block { border: 4px black; border-radius: 0px; background-color: #fffff9; padding: 0px; padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } @media (min-width: 768px) { #block-1694873497033 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1694873497033 .block { padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } } @media (max-width: 767px) { #block-1694873497033 { text-align: left; } } #block-1577982541036_0 .btn { margin-top: 1rem; } #block-1694872795640 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1694872795640 .block { border: 4px none black; border-radius: 0px; padding: 0; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } @media (min-width: 768px) { #block-1694872795640 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1694872795640 .block { padding: 0; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } } @media (max-width: 767px) { #block-1694872795640 { text-align: ; } } #block-1694872795640 .block, [data-slick-id="1694872795640"] .block { display: flex; justify-content: flex-start; } #block-1694872795640 .image, [data-slick-id="1694872795640"] .image { width: 100%; overflow: hidden; border-radius: 0px; } #block-1694872795640 .image__image, [data-slick-id="1694872795640"] .image__image { width: 100%; } #block-1694872795640 .image__overlay, [data-slick-id="1694872795640"] .image__overlay { opacity: 0; background-color: #fff; border-radius: 0px; } #block-1694872795640 .image__overlay-text, [data-slick-id="1694872795640"] .image__overlay-text { color: !important; } @media (min-width: 768px) { #block-1694872795640 .block, [data-slick-id="1694872795640"] .block { display: flex; justify-content: flex-start; } #block-1694872795640 .image__overlay, [data-slick-id="1694872795640"] .image__overlay { opacity: 0; } #block-1694872795640 .image__overlay:hover { opacity: 1; } } #block-1694873532692 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1694873532692 .block { border: 4px black; border-radius: 0px; background-color: #efe0e2; padding: 0px; padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } @media (min-width: 768px) { #block-1694873532692 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1694873532692 .block { padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } } @media (max-width: 767px) { #block-1694873532692 { text-align: left; } } #block-1577982541036_0 .btn { margin-top: 1rem; } #block-1706866820887 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706866820887 .block { border: 1px solid #9d8a75; border-radius: 0px; background-color: #fffff9; padding: 0px; padding: 0px; padding: 0px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } @media (min-width: 768px) { #block-1706866820887 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706866820887 .block { padding: 0px; padding: 0px; padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px; } } @media (max-width: 767px) { #block-1706866820887 { text-align: left; } } #block-1706866820887 .accordion-title h5 { margin: 0; cursor: pointer; } #block-1706866820887 .accordion-body { padding-top: 24px; } #block-1706866820887 .accordion-title.collapsed:after { content: "\f067"; margin-left: 24px; } #block-1706866820887 .accordion-title:after { content: "\f068"; margin-left: 24px; color: #512a44; } #block-1695978871700 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1695978871700 .block { border: 4px black; border-radius: 0px; background-color: #fffff9; padding: 0px; padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } @media (min-width: 768px) { #block-1695978871700 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1695978871700 .block { padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } } @media (max-width: 767px) { #block-1695978871700 { text-align: left; } } #block-1695978871700 .image__image { max-width: 35%; border-radius: 0px; } #block-1695978871700 .image__image { float: left; margin-right: 15px; margin-bottom: 10px; } #block-1706799523683 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706799523683 .block { border: 4px black; border-radius: 0px; background-color: #fffff9; padding: 0px; padding: 0px; padding: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } @media (min-width: 768px) { #block-1706799523683 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706799523683 .block { padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } } @media (max-width: 767px) { #block-1706799523683 { text-align: left; } } #block-1706799523683 .image__image { max-width: 35%; border-radius: 0px; } #block-1706799523683 .image__image { float: right; margin-left: 15px; margin-bottom: 10px; } #block-1706799670680 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706799670680 .block { border: 4px black; border-radius: 0px; background-color: #fffff9; padding: 0px; padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } @media (min-width: 768px) { #block-1706799670680 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706799670680 .block { padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } } @media (max-width: 767px) { #block-1706799670680 { text-align: left; } } #block-1706799670680 .image__image { max-width: 35%; border-radius: 0px; } #block-1706799670680 .image__image { float: left; margin-right: 15px; margin-bottom: 10px; } #block-1706869926303 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706869926303 .block { border: 1px solid #9d8a75; border-radius: 0px; background-color: #ffffff; padding: 0px; padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } @media (min-width: 768px) { #block-1706869926303 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706869926303 .block { padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } } @media (max-width: 767px) { #block-1706869926303 { text-align: center; } } #block-1706869926303 .feature__image, [data-slick-id="1706869926303"] .feature__image { width: 50px; border-radius: 0px; } #block-1706869926303 .c100 {float: none; margin: 0 auto;} @media only screen and (min-width: 768px) { #block-1706869926303 .revcirle, #block-1706869926303 .revtext {width: 100%;} #block-1706869926303 .revcirle {display: none;} } @media only screen and (max-width: 767px) { #block-1706869926303 .revcirle, #block-1706869926303 .revtext {width: 100%;} #block-1706869926303 .revcirle {display: none;} } #block-1706869926303 .revtext p {font-size: 14px; padding: 5px 5px 3px 5px; border-bottom: solid 1px #dddddd; margin-bottom: 0; text-align: left; } #block-1706869926303 .revtext span { float: right; } #block-1706869926303 .fill, #block-1706869926303 .bar { border-color: #512a44; } .rect-auto { clip: rect(auto, auto, auto, auto); } .pie, .c100 .bar { position: absolute; border: 0.08em solid #512a44; width: 0.84em; height: 0.84em; clip: rect(0em, 0.5em, 1em, 0em); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .pie-fill { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .c100.p75 .slice { clip: rect(auto, auto, auto, auto); } .c100.p75 .fill { position: absolute; border: 0.08em solid #512a44; width: 0.84em; height: 0.84em; clip: rect(0em, 0.5em, 1em, 0em); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .c100.p75 .bar:after, .c100.p75 .fill { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } #block-1706869926303 .c100 { background-color: #cccccc; } .c100 { position: relative; width: 1em; height: 1em; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; // margin: 0 0.1em 0.1em 0; background-color: #cccccc; // float: left; } .c100 *, .c100 *:before, .c100 *:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } #block-1706869926303 .c100 span { color: #512a44; } .c100 span { position: absolute; width: 100%; z-index: 1; left: 0; top: 0; width: 5em; line-height: 5em; font-size: 0.2em; color: #cccccc; display: block; text-align: center; white-space: nowrap; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } #block-1706869926303 .c100:after { background-color: ; } .c100:after { position: absolute; top: 0.08em; left: 0.08em; display: block; content: " "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: ; width: 0.84em; height: 0.84em; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-timing-function: ease-in; } .c100 .slice { position: absolute; width: 1em; height: 1em; clip: rect(0em, 1em, 1em, 0.5em); } .c100.p75 .bar { -webkit-transform: rotate(270.0deg); -moz-transform: rotate(270.0deg); -ms-transform: rotate(270.0deg); -o-transform: rotate(270.0deg); transform: rotate(270.0deg); } #block-1706869926303 .c100:hover { cursor: default; } #block-1706869926303 .c100:hover span { color: #512a44; } #block-1706869926303 .c100:hover span { width: 3.33em; line-height: 3.33em; font-size: 0.3em; color: ; } #block-1706869926303 .c100:hover:after { top: 0.04em; left: 0.04em; width: 0.92em; height: 0.92em; } #block-1706870914612 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706870914612 .block { border: 4px black; border-radius: 0px; padding: 0px; padding: 0; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } @media (min-width: 768px) { #block-1706870914612 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706870914612 .block { padding: 0; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } } @media (max-width: 767px) { #block-1706870914612 { text-align: ; } } #block-1706870914612 .block, [data-slick-id="1706870914612"] .block { display: flex; justify-content: flex-start; } #block-1706870914612 .image, [data-slick-id="1706870914612"] .image { width: 100%; overflow: hidden; border-radius: 4px; } #block-1706870914612 .image__image, [data-slick-id="1706870914612"] .image__image { width: 100%; } #block-1706870914612 .image__overlay, [data-slick-id="1706870914612"] .image__overlay { opacity: 0; background-color: #fff; border-radius: 4px; } #block-1706870914612 .image__overlay-text, [data-slick-id="1706870914612"] .image__overlay-text { color: !important; } @media (min-width: 768px) { #block-1706870914612 .block, [data-slick-id="1706870914612"] .block { display: flex; justify-content: flex-start; } #block-1706870914612 .image__overlay, [data-slick-id="1706870914612"] .image__overlay { opacity: 0; } #block-1706870914612 .image__overlay:hover { opacity: 1; } } #block-1706799983051 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706799983051 .block { border: 4px black; border-radius: 0px; background-color: #efe0e2; padding: 0px; padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } @media (min-width: 768px) { #block-1706799983051 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706799983051 .block { padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } } @media (max-width: 767px) { #block-1706799983051 { text-align: left; } } #block-1577982541036_0 .btn { margin-top: 1rem; } #block-1696522456141 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1696522456141 .block { border: 1px solid #9d8a75; border-radius: 0px; padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } @media (min-width: 768px) { #block-1696522456141 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1696522456141 .block { padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } } @media (max-width: 767px) { #block-1696522456141 { text-align: center; } } #block-1696522456141 .feature__image, [data-slick-id="1696522456141"] .feature__image { width: 100px; border-radius: 100px; } .authorfeature { display: flex; align-items: flex-start; position: relative; } .authorfeature__image-container { flex-shrink: 0; margin-right: 20px; } .authorfeature__image { max-width: 150px; height: auto; } .authorfeature__content { flex-grow: 1; } @media (max-width: 767px) { #block-1696522456141 .authorfeature { flex-direction: column; align-items: center; } #block-1696522456141 .authorfeature__image-container { margin-right: 0; } } .awesomecontainer .row .block-type--accordion { align-self: flex-start; }
