How to Embed Custom Fonts to Your Page

Kayla M.

Updated

Learn to customize and brand your site by embedding custom fonts from applications like Google Fonts and Adobe Fonts. 

In this article:

Completion of the steps in this guide requires working with HTML and CSS code. If you aren't familiar with HTML and CSS, we recommend consulting with a web design professional regarding the addition of embed code to your Kajabi site.

Embedding custom fonts

While Kajabi offers many native fonts in the Page Builder, the custom code feature also enables you to use your own custom font to design a uniquely branded page. For example, you can embed code from various sources such as Google Fonts or Adobe Fonts.

Regardless of your Kajabi plan, you can add custom fonts to your page without having to use the code editor!

Note:
If you're using the Premier Legacy Templates, adding custom fonts will require access to the Code Editor. For help embedding code in Premier, please refer to the guide here. This guide refers to the latest website Page Builder and doesn't require access to the Code Editor only available with the Pro Plan. 

This guide will show you how to add a custom font using an embed code.

Let's start by quickly discussing the basics of embed codes, HTML, and CSS.

What’s an embed code?

An embed code is a code snippet generated by a third-party and shared with you to allow you to add code from an external source to your own website.

With Kajabi, you can use embed codes to add a wide variety of media to your site, such as embedding a YouTube video, or in this case, a font. You simply need to insert the embed code into the correct custom code field(s) in the Page Builder.

Embedded code is most often HTML or CSS code (Kajabi also provides the ability to embed JavaScript code via the Page Builder, but JavaScript isn’t needed to embed a custom font).

Warning:
Introducing custom code to your site can open you up to vulnerabilities and potential malware attacks. We recommend using vulnerability tools like VirusTotal or Snyk to scan any custom code that you intend to use and apply certain best practices to help reduce potential impact.

What are HTML and CSS?

Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) are the building blocks of frontend web design.

HTML

HTML code generates your page structure.

Each piece of text on your webpage is an HTML element wrapped in HTML code tags. For example, an HTML paragraph element would be enclosed between an opening <p> tag and a closing </p> tag, like this: <p>Hello World!</p>

When a visitor views your page, they can’t see the HTML tags. Only the text inside is displayed.

CSS

CSS determines your page layout.

You can control the visual appearance of every HTML element on your website, including the font used for your text elements, by modifying your CSS code.

It’s possible to change the font for a specific text element only, or for every text element on your page. In this guide, we’ll walk you through how to accomplish both.

Add a custom font to an entire page

By adding an embed code to your Kajabi Page, you can style your text with a custom font that best fits your brand.

In this example, we'll show you how to add a custom font from Google Fonts. You can also use this procedure to embed code from other custom font providers, like Adobe Fonts. Click here to learn how to obtain Adobe Font code.

Step 1. Get your Google Font embed code

  • Click here to access the Google Fonts dashboard.
  • Click on your desired font to open the font details.
  • Scroll down to the Styles section and locate your desired font style.
  • Click the blue font style link to the right of your font style to open the right sidebar menu. (Example link text: Regular 400).
  • From the "Use on the web" section, select the radio button next to <link>.
  • Select and copy the HTML code:

Step 2. Paste the HTML code into your page

  • In a separate browser tab, log into your Kajabi account.
  • Open the Website tab from your Kajabi Dashboard.
  • Click Pages.
  • Select the page where you would like to add your custom font.
  • In the sidebar editor, select Add Section.
  • Choose a Custom Code Section from the list, and click Add.
  • Then, click to open the Custom Code Block in the sidebar editor.
  • Paste your embed code into the Code input field:

Step 3. Paste the CSS code into your page

  • At the top of the left sidebar, click the Back link twice.
  • Then, open the Settings tab. 
  • Click Custom Code.
  • Input the following CSS code into the CSS Code field:
h1, h2, h3, h4, p {
font-family: YOUR CODE HERE;
}

This code will apply your custom font to every heading 1, heading 2, heading 3, heading 4, and paragraph HTML element on your page. Add and/or remove HTML text elements as desired. Learn more about HTML headings and paragraphs.

  • Navigate back to Google Fonts in your other browser tab.
  • From the "Use on the web" section in the sidebar, locate CSS rules to specify families.
  • Select and copy the CSS code.
  • Return to your Kajabi page.
  • Replace YOUR CODE HERE with the code snippet you copied.
  • Click Save to keep your changes and apply your font:

Add a custom font to a single text element

By adding an embed code to your Kajabi Page, you can style your text with a custom font that best fits your brand.

In this example, we'll show you how to add a custom font from Google Fonts. You can also use this procedure to embed code from other custom font providers, like Adobe Fonts. Click here to learn how to obtain Adobe Font code.

Step 1. Get your Google Font embed code

  • Click here to access the Google Fonts dashboard.
  • Click on your desired font to open the font details.
  • Scroll down to the Styles section and locate your desired font style.
  • Click the blue font style link to the right of your font style to open the right sidebar menu. (Example link text: Regular 400).
  • From the "Use on the web" section, select the radio button next to @import.
  • Select and copy the CSS code between the <style> and </style> tags:

Step 2. Paste the import code into your page

  • In a separate browser tab, log into your Kajabi account.
  • Open the Website tab from your Kajabi Dashboard.
  • Click Pages.
  • Select the page where you would like to add your custom font.
  • In the sidebar editor, click the Settings tab.
  • Then, click Custom Code.
  • In the CSS Code field, paste the code you copied in Step 1.
  • Click Save to keep your changes:

Step 3. Add inline CSS code to your text element

  • Select the Text Block containing the text you wish to customize or create a new one.
  • In the sidebar editor, locate the Text editor and click the source code icon <>.
  • Copy the snippet of HTML code below:

<span style="YOUR FONT FAMILY CODE HERE">

  • Locate the HTML text element you wish to update.
  • Paste the code snippet directly after the opening HTML tag.
    (Example: pasting code after the<h2>tag will update your heading 2 font).
  • Then, input a closing span tag </span> directly before the closing HTML tag.
    (Example: if you pasted the first code snippet after an <h2>tag, place </span> directly before the </h2>tag, like this):

    <h2><span style="YOUR FONT FAMILY CODE HERE">Text Here</span></h2>
  • Navigate back to Google Fonts in your other browser tab.
  • From the "Use on the web" section in the sidebar, locate CSS rules to specify families.
  • Select and copy the CSS code.
  • Return to your Kajabi page.
  • Replace YOUR FONT FAMILY CODE HERE with the code snippet you copied.
    (Note: be careful not to delete any quotation marks when pasting your code).
  • Click Ok, then Save to keep your changes and apply your font:

Using Adobe Fonts instead of Google Fonts

In order to add a custom font to your Kajabi site, you'll first need to obtain the embed code. In the guide above, we added a Google Font to our site. The same steps can be used to add an Adobe Font, once you have your Adobe Font code in hand.

New to Adobe Fonts? We've got you covered!

Choose a new Adobe Font and locate your code:

  • Click Here to access the Adobe Fonts dashboard.
  • Either log into your Adobe account, or create a new account.
  • Click Browse all fonts.
  • Select the custom font you'd like to use and click the code icon </>.
    (Don't see the code icon? Check if you're logged into your account).
  • In the "Add fonts to a Web Project" popup, click the dropdown arrow and select + Create a new project.
  • Enter a name for your web project and click Create.
  • Once you've created your project, you'll be able to copy all of the embed codes you need directly from the popup:

Already have a custom Adobe Font saved in your account, but not sure where to find the code? We can help with that too!

Locate your existing Adobe Font code:

  • Click Here to access the Adobe Fonts dashboard.
  • Log into your Adobe account.
  • In the upper right corner of your dashboard screen, click Manage fonts.
  • Select the Web Projects tab.
  • You can find your first piece of embed code in the Embed Project section.
  • To access your font-family CSS code, click the font image on the left.
  • Scroll down to the Details section, to How to Use.
  • You can find your CSS code under Web:

Note:
For more details on how to update CSS font code, take a look at this guide.

And that's how to embed custom fonts to your Pages! Please vote below and let us know if you found this article helpful. We value your feedback. Thanks for being the best part of Kajabi!

Did you find this article helpful?