Thank you! Your video is 100x better than the information in Kajabi. I spent twelves hours trying to figure this out using the help pages in Kajabi. Your video solved my problems in less than 15 minutes. Kajabi should pay you for this. Thanks!
@@chelseybernhard Hi Chelsey. Are you available for hire to troubleshooting? I followed these instructions, it worked for a bit. The font shows up in the editor and on mobile, but not on desktop. Can you assist?
Thanks so much for this honestly, watched so many videos and only this could really help without being too complex since coding isn't my thing! _ Much love Chelsey!
Hi! I've tried this and it works! My problem is that I have added a custom domain and now it doesn't work for that new domain. Any idea why or how to fix it? :)
Yes you can use google fonts. It's actually much easier to do. Send me an email at chelsey@onitvirtualservices.com and I will send you a link to a video tutorial on how to add a google font.
Thank you for this, Chelsey! It is very straightforward and easy to follow... I'm like Brooke - still not quite getting it to work. Will send you an email directly now:)
your video is awesome so far.. but out of all the fonts I have, I wanted to use a few fonts that I have the .otf for, and Kajabi won't let me select them. Only the .ttf file. Any ideas how to get Kajabi to accept them? Thank you, back to your video now...
Sorry, I haven't made it yet but you can take the same code from this video, remove the and tags from the code, and paste the same code into the CSS section of any landing page. The code is the same for either place.
Have an other question, how do I insert two different fonts one for the heading and one for the body. I can't seem to make it work with the code and the no asset page, been trying to figure this out for two days. Thank you!
Load the two fonts following the same steps using the assets page. When you write the second code to identify the font to use for headings, use the font name that you want for H1, H2, etc. Then use the other font name when you write the body font code.
I purchased a font from a site and downloaded in my downloads. It doesn't appeared to be zipped as I have other fonts that did come zipped and shows the zipper icon. This particular font (I use a Mac) is just in a folder with a separate folder for licenses and another folder with the font. When I try to download it into the Kajabi Assets link page I created following your video, it said it didn't work. But then after a couple of tries it quickly goes from the red didn't download to what appears to be a green something but it disappears too fast to see what's going on. So I don't think it's actually downloading . . . and I don't now how to find the script code. PLEASE help!!!
Hi, I am not quite following what's going on with your setup based on your comment. If you'd like to hop on a quick "unstuck me" call, I can take a look at what's happening on your screen and see what the issue is. Feel free to book a call here: www.onitvirtualservices.com/unstuckme-free-chelsey
Sorry, I haven't made it yet but you can take the same code from this video, remove the and tags from the code, and paste the same code into the CSS section of any landing page. The code is the same for either place.
Great information! I have two different fonts I'd like to use for headings. I have one as Headings 1 & 2 and the other for 3&4. How can I increase the size of 3 &4? If I go into the settings page and change it there, it then changes my fonts back to the ones already established instead of the ones I have added across the website.
Hi @aleciaannyoga You can increase the font for just h3 and h4 by adding into the code the font-size property. h3, h4 { font-family: 'FontName', sans-serif; font-size: 32px; } Here is a link to help you: www.w3schools.com/css/css_font_size.asp#:~:text=The%20default%20text%20size%20in,size%20of%201em%20is%2016px.
@@coralantler It's possible there may be some other code or something conflicting it. Feel free to email me if you'd like me to look into it further. chelsey@onitvirtualservices.com
Thanks Brooke! I have checked out your code and it looks ok. I did notice you have an apostrophe in the file name. Remove that from the actual file name AND in your code. That should do the trick.
Followed your tutorial and it worked perfectly! Thank you!! Just wondering, is it possible to have two fonts for the header? The font I'm using has a different look on the italic style, and while kajabi automatically has the italic feature, it's not the same as the font's italic version. I tried adding both with the same coding, but it just catches 1 of them - as I expected. Is there a code for a situation like this?
Hi Gaby, happy to hear it worked for you! If you want to have another font, you can just load it the same and assign the second font to apply to h5 for example (one that you won't use anywhere else on your site). Then set the font size in the page settings so it's the same font size as h1 or h2, whichever you are wanting it for. If you need more help, feel free to email me a chelsey@onitvirtualservices.com.
Sorry! I never got around to making it... It's super simple to do the landing page only though. You use the same code, just eliminate the and parts of the code. Paste your code into the Custom CSS section of the individual landing page and you're good to go! Feel free to email me at chelsey@onitvirtualservices.com if you need any help.
Hi Floreci, sorry I didn't get to uploading it. What you would do different is add the code to the CSS section of the page settings and not include the and part of the code.
Great tutorial! BUT, It dosent work for me... well, kinda. Because in preview-mode everything looks correct, but at the website it doesn't change.. tried to delete the cache, visit the page incognito, but no changes.. I also did letter spacing and all caps in some of the headings, and that's correct tho... whats wrong?! Nevermind, found my own mistake 😅😅😅😅 But, I'm trying to customize the form-button as well, But it wont work.. :/
Thank you 🥰🥰@@chelseybernhard Another question, If someone have coded just one landingpage, and then do the coding for the whole site in a different font. Which one will appear at the site?
Thank you for the run-through. I was able to get it to work, I am using a .OTF and when I load the page another font shows up first, and then the new font shows up. Do you know why there is a delay?
Hi Danielle, That's pretty normal as it takes a moment for the page to load the font. There are ways to fix this but it involves coding that is out of my expertise.
@@chelseybernhard Thank you for your quick reply :) Any chance you know how to 1. Force a lazy load, and 2. speed up mobile load time? (It looks like wistia is the cause of this...)
@@DanigRast Jason Go would be the best person to help you with Kajabi speed issues. It's his main focus for helping others right now. If you are in the Official Kajabi Facebook Group you can message him through there. He's a pro!
So mine works in preview but not on the live site... it would not have anything to do with preview showing the xxx.mykajabi url and the site my domain would it? I tried loading both urls in the scripts and same outcome.
If you check the section on the code page where I explain some common mistakes, you'll see this line about removing the domain part of the url: 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.
Got Stuck? 🆘 Book a FREE Mini "Unstuck Me" Call here ►► onitvirtualservices.com/unstuckme-free-chelsey
Thank you! Your video is 100x better than the information in Kajabi. I spent twelves hours trying to figure this out using the help pages in Kajabi. Your video solved my problems in less than 15 minutes. Kajabi should pay you for this. Thanks!
You are so welcome! Glad it helped.
Excellent tutorial, Chelsey, thank you.
Thank you so much Anno!
Thank you so much Chelsea, your video was so easy to follow and understand and it worked and solved a huge headache for me, so thankful!
You are very welcome! Glad it helped.
Thanks for posting this great tutorial Chelsey!
You’re very welcome!
WOW!!! Absolutely fantastic. I'm heading over to try it right now. So clear and concise!💞
Glad you enjoyed it!
Thank you! I tried this by following the tutorial on Kajabi's own site and it didn't work. Yours worked right away!
So glad it helped! Thanks for letting me know.
Chelsey, you are bomb!
This was a great tutorial video, simple and easy to follow.
I just subscribed!
Thanks Kaci! Glad it was easy and helpful!
@@chelseybernhard Hi Chelsey. Are you available for hire to troubleshooting? I followed these instructions, it worked for a bit. The font shows up in the editor and on mobile, but not on desktop. Can you assist?
@@KaciJackson Happy to help. Send me an email at chelsey@onitvirtualservices.com and I can see what's causing the problem.
THANK YOU FOR THIS!
Thanks so much for this tutorial! Does it also work with the basic plan?
Yes! It works on any plan. :)
Thank you for this.
Love you
You are so welcome
Thanks so much for this honestly, watched so many videos and only this could really help without being too complex since coding isn't my thing! _ Much love Chelsey!
You are so welcome! Thanks for your kind words. Glad it was helpful.
Hi! I've tried this and it works! My problem is that I have added a custom domain and now it doesn't work for that new domain. Any idea why or how to fix it? :)
Chelsea can you do this with Google Fonts? I want Poppins Bold to be all Headings and Poppins regular to be all body text on all types of pages.
Yes you can use google fonts. It's actually much easier to do. Send me an email at chelsey@onitvirtualservices.com and I will send you a link to a video tutorial on how to add a google font.
Thank you for this, Chelsey! It is very straightforward and easy to follow... I'm like Brooke - still not quite getting it to work. Will send you an email directly now:)
Nevermind... suddenly it all came together. Thank you so much!!! I love this!
your video is awesome so far.. but out of all the fonts I have, I wanted to use a few fonts that I have the .otf for, and Kajabi won't let me select them. Only the .ttf file. Any ideas how to get Kajabi to accept them? Thank you, back to your video now...
You can convert the otf file to ttf using a free online converter (cloudconvert.com/otf-to-ttf) or you can try to find a ttf file of your same font.
I could not find your tutorial on adding a font to a landing page. Could you please share the link?
Sorry, I haven't made it yet but you can take the same code from this video, remove the and tags from the code, and paste the same code into the CSS section of any landing page. The code is the same for either place.
Hi! Where can I get the script codes? Thank you
Here you go! www.onitvirtualservices.com/custom-fonts
@@chelseybernhard Thank you so much!!!!!!
Have an other question, how do I insert two different fonts one for the heading and one for the body. I can't seem to make it work with the code and the no asset page, been trying to figure this out for two days. Thank you!
Load the two fonts following the same steps using the assets page. When you write the second code to identify the font to use for headings, use the font name that you want for H1, H2, etc. Then use the other font name when you write the body font code.
I purchased a font from a site and downloaded in my downloads. It doesn't appeared to be zipped as I have other fonts that did come zipped and shows the zipper icon. This particular font (I use a Mac) is just in a folder with a separate folder for licenses and another folder with the font. When I try to download it into the Kajabi Assets link page I created following your video, it said it didn't work. But then after a couple of tries it quickly goes from the red didn't download to what appears to be a green something but it disappears too fast to see what's going on. So I don't think it's actually downloading . . . and I don't now how to find the script code. PLEASE help!!!
Hi, I am not quite following what's going on with your setup based on your comment. If you'd like to hop on a quick "unstuck me" call, I can take a look at what's happening on your screen and see what the issue is. Feel free to book a call here: www.onitvirtualservices.com/unstuckme-free-chelsey
Once you do this, how do you update the site to the new fonts?
I am not sure what you are asking. This is a video on updating the site to new fonts.
Where do I find the tutorial on loading a custom font into a single landing page? Thanks!
To make it just for a landing page you can take the same code and remove the and tags. Paste the code in the CSS block in the landing page settings.
You are fabulous for replying so quickly!!!!@@chelseybernhard
I searched for the video you referenced for when you want to use a custom font for a landing page only, but I cannot find it. Help?
Sorry, I haven't made it yet but you can take the same code from this video, remove the and tags from the code, and paste the same code into the CSS section of any landing page. The code is the same for either place.
Great information!
I have two different fonts I'd like to use for headings. I have one as Headings 1 & 2 and the other for 3&4. How can I increase the size of 3 &4? If I go into the settings page and change it there, it then changes my fonts back to the ones already established instead of the ones I have added across the website.
Hi @aleciaannyoga You can increase the font for just h3 and h4 by adding into the code the font-size property.
h3, h4 {
font-family: 'FontName', sans-serif;
font-size: 32px;
}
Here is a link to help you: www.w3schools.com/css/css_font_size.asp#:~:text=The%20default%20text%20size%20in,size%20of%201em%20is%2016px.
It works on the assets page but isn’t changing on any of my other pages 🤔
Did you add the code to the main site settings under Header Page Script?
@@chelseybernhard yes I did
@@chelseybernhard I followed the instructions exactly
@@coralantler It's possible there may be some other code or something conflicting it. Feel free to email me if you'd like me to look into it further. chelsey@onitvirtualservices.com
Great tutorial! So clear and easy to follow....YET I'm still messing it up somehow. 🤦🏻♀ I'm going to email you directly, but wanted to say thank you!
Thanks Brooke! I have checked out your code and it looks ok. I did notice you have an apostrophe in the file name. Remove that from the actual file name AND in your code. That should do the trick.
Followed your tutorial and it worked perfectly! Thank you!!
Just wondering, is it possible to have two fonts for the header? The font I'm using has a different look on the italic style, and while kajabi automatically has the italic feature, it's not the same as the font's italic version.
I tried adding both with the same coding, but it just catches 1 of them - as I expected. Is there a code for a situation like this?
Hi Gaby, happy to hear it worked for you! If you want to have another font, you can just load it the same and assign the second font to apply to h5 for example (one that you won't use anywhere else on your site). Then set the font size in the page settings so it's the same font size as h1 or h2, whichever you are wanting it for. If you need more help, feel free to email me a chelsey@onitvirtualservices.com.
@@chelseybernhard omg what a GREAT idea!!!!!!! thank you so much!!!
You reference another tutorial for updating the fonts for a landing page only. I do not see that tutorial on your TH-cam page?
Sorry! I never got around to making it... It's super simple to do the landing page only though. You use the same code, just eliminate the and parts of the code. Paste your code into the Custom CSS section of the individual landing page and you're good to go! Feel free to email me at chelsey@onitvirtualservices.com if you need any help.
hello do you have alink of how to custom code in sinngle landing page? i cant find it your youtube. thank you
Hi Floreci, sorry I didn't get to uploading it. What you would do different is add the code to the CSS section of the page settings and not include the and part of the code.
Great tutorial! BUT, It dosent work for me... well, kinda. Because in preview-mode everything looks correct, but at the website it doesn't change.. tried to delete the cache, visit the page incognito, but no changes.. I also did letter spacing and all caps in some of the headings, and that's correct tho... whats wrong?!
Nevermind, found my own mistake 😅😅😅😅 But, I'm trying to customize the form-button as well, But it wont work.. :/
Glad you figured it out! Add in the below code but change the FontName to your font:
.form-btn {
font-family: 'FontName', sans-serif;
}
Thank you 🥰🥰@@chelseybernhard Another question, If someone have coded just one landingpage, and then do the coding for the whole site in a different font. Which one will appear at the site?
Thank you for the run-through. I was able to get it to work, I am using a .OTF and when I load the page another font shows up first, and then the new font shows up. Do you know why there is a delay?
Hi Danielle, That's pretty normal as it takes a moment for the page to load the font. There are ways to fix this but it involves coding that is out of my expertise.
@@chelseybernhard Thank you for your quick reply :) Any chance you know how to 1. Force a lazy load, and 2. speed up mobile load time? (It looks like wistia is the cause of this...)
@@DanigRast Jason Go would be the best person to help you with Kajabi speed issues. It's his main focus for helping others right now. If you are in the Official Kajabi Facebook Group you can message him through there. He's a pro!
So mine works in preview but not on the live site... it would not have anything to do with preview showing the xxx.mykajabi url and the site my domain would it? I tried loading both urls in the scripts and same outcome.
found it looking in Kajabi help - if anyone else has this issue start your url with... url('/resource_redirect/downloads/file-uploads/x
If you check the section on the code page where I explain some common mistakes, you'll see this line about removing the domain part of the url: 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.