Another popular question I get is

'How do I introduce a 3rd Font to my page or site?".

 

So I thought this would be a great little lesson to show you how to add a 3rd font, as well as how to use Google fonts within your Kajabi page.

First up, find the Kajabi page you want to add a 3rd font (or custom Google Fonts) to. Head to Settings, and open up the Custom Css Code Block.

Next, you're going to want to open up Google Fonts --> HERE.

Next click on the Categories Dropdown and choose which type of font style you're after.

Then once you've chosen your font, click on it to open it up and scroll down to where you see Styles.

 

 

Pick the Style (weight of the font) by click on the + sign.  And this will add it to your Selected Family window.

Note: if the window on the right hand side doesn't open,
just click the Square/+ icon in the top right corner.

When it's opened you want to click on 'import' to bring up the code you'll be needing. And then copy everything in-between the <style> tags.  We'll be bringing this back over into Kajabi.

After that you'll head back into your Kajabi page, into the Custom CSS Code Block, under settings. And paste in the code you just copied.

Then pop back over to Google fonts and copy the CSS rules for the font-family (underlined).  You'll then paste that into the Custom css block as well, but like this:

This will now use the Figtree font (as an example) as the font for everywhere you use the H1 Tag (or Heading 1).

Now you've added a 3rd font. 🙌

This doesn't affect the fonts you've already set up in your Style Guide... this is now an extra command that we've given Kajabi. 

We've effectively said... 'hey Kajabi, you can use the normal heading and base fonts throughout the site, but anywhere you see a Heading 1 style used... we want you to use our new 3rd font'.

You'll see in the video that we can use the same code for more than just one more Heading Tag... you can pick and choose which heading tags, or body/paragraph you want to apply these custom fonts to.

Have fun!!!