> ## Documentation Index
> Fetch the complete documentation index at: https://help.kajabi.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Embed custom fonts to a page
> Customize and brand your site by embedding custom fonts from Google Fonts and Adobe Fonts.
Use custom fonts to design a uniquely branded page that matches your business identity.
## Overview
While Kajabi offers many native fonts in the Page Builder, you can also embed custom fonts from sources like Google Fonts or Adobe Fonts. Regardless of your Kajabi plan, you can add custom fonts to your page without needing to use the code editor.
**Note:** 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.
**Note:** If you're using the [Premier](/articles/website/pages/how-to-create-a-new-page-with-premier) Legacy Templates, adding custom fonts will require access to the Code Editor. For help embedding code in Premier, refer to the guide [here](/articles/website/pages/how-to-use-a-google-font-on-your-site-with-premier). This guide refers to the latest website Page Builder and doesn't require access to the Code Editor only available with the [Pro Plan](https://kajabi.com/pricing).
***
## Embedding custom fonts
This guide shows you how to add a custom font using an embed code.
### 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).
**Important:** Introducing custom code to your site can open you up to vulnerabilities and potential malware attacks. We recommend using vulnerability tools like [VirusTotal](https://www.virustotal.com/gui/home/url) or [Snyk](https://snyk.io/) to scan any custom code that you intend to use and apply certain [best practices](/articles/website/domains/code-based-customizations) 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 `
` tag and a closing `
` tag, like this: `
Hello World!
`
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](#using-adobe-fonts-instead-of-google-fonts) to learn how to obtain Adobe Font code.
### Step 1. Get your Google Font embed code
1. [Click here](https://fonts.google.com/) to access the Google Fonts dashboard.
2. Click on your desired font to open the font details.
3. Scroll down to the **Styles** section and locate your desired font style.
4. Click the **blue font style link** to the right of your font style to open the right sidebar menu. (Example link text: Regular 400).
5. From the "Use on the web" section, select the radio button next to **\**.
6. Select and copy the HTML code.
### Step 2. Paste the HTML code into your page
1. In a separate browser tab, log into your Kajabi account.
2. Open the **Website** tab from your Kajabi Dashboard.
3. Click **Pages**.
4. Select the page where you would like to add your custom font.
5. In the sidebar editor, select **Add Section**.
6. Choose a **Custom Code** Section from the list, and click **Add**.
7. Click to open the **Custom Code** Block in the sidebar editor.
8. Paste your embed code into the **Code** input field.
### Step 3. Paste the CSS code into your page
1. At the top of the left sidebar, click the **Back** link twice.
2. Open the **Settings** tab.
3. Click **Custom Code**.
4. Input the following CSS code into the **CSS Code** field:
```css theme={null}
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](https://www.w3schools.com/html/html_headings.asp) and [paragraphs](https://www.w3schools.com/html/html_paragraphs.asp).
5. Navigate back to Google Fonts in your other browser tab.
6. From the "Use on the web" section in the sidebar, locate **CSS rules to specify families**.
7. Select and copy the CSS code.
8. Return to your Kajabi page.
9. Replace `YOUR CODE HERE` with the code snippet you copied.
10. 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](#using-adobe-fonts-instead-of-google-fonts) to learn how to obtain Adobe Font code.
### Step 1. Get your Google Font embed code
1. [Click here](https://fonts.google.com/) to access the Google Fonts dashboard.
2. Click on your desired font to open the font details.
3. Scroll down to the **Styles** section and locate your desired font style.
4. Click the **blue font style link** to the right of your font style to open the right sidebar menu. (Example link text: Regular 400).
5. From the "Use on the web" section, select the radio button next to **@import**.
6. Select and copy the CSS code between the `` tags.
### Step 2. Paste the import code into your page
1. In a separate browser tab, log into your Kajabi account.
2. Open the **Website** tab from your Kajabi Dashboard.
3. Click **Pages**.
4. Select the page where you would like to add your custom font.
5. In the sidebar editor, click the **Settings** tab.
6. Click **Custom Code**.
7. In the **CSS Code** field, paste the code you copied in Step 1.
8. Click **Save** to keep your changes.
### Step 3. Add inline CSS code to your text element
1. Select the Text Block containing the text you wish to customize or [create a new one](/articles/website/pages/how-to-add-a-text-block-to-your-page).
2. In the sidebar editor, locate the Text editor and click the source code icon `<>`.
3. Copy the snippet of HTML code below:
``
4. Locate the HTML text element you wish to update.
5. Paste the code snippet directly after the opening HTML tag. (Example: pasting code after the `
` tag will update your heading 2 font).
6. Input a closing span tag `
` directly before the closing HTML tag. (Example: if you pasted the first code snippet after an `
` tag, place `` directly before the `
` tag, like this):
`
Text Here
`
7. Navigate back to Google Fonts in your other browser tab.
8. From the "Use on the web" section in the sidebar, locate **CSS rules to specify families**.
9. Select and copy the CSS code.
10. Return to your Kajabi page.
11. Replace `YOUR FONT FAMILY CODE HERE` with the code snippet you copied. (Be careful not to delete any quotation marks when pasting your code).
12. Click **Ok**, then **Save** to keep your changes and apply your font.
***
## Using Adobe Fonts instead of Google Fonts
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.
### Choose a new Adobe Font and locate your code
1. [Click here](https://fonts.adobe.com/) to access the Adobe Fonts dashboard.
2. Either log into your Adobe account, or create a new account.
3. Click **Browse all fonts**.
4. 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).
5. In the "Add fonts to a Web Project" popup, click the dropdown arrow and select **+ Create a new project**.
6. Enter a name for your web project and click **Create**.
7. Once you've created your project, you'll be able to copy all of the embed codes you need directly from the popup.
### Locate your existing Adobe Font code
Already have a custom Adobe Font saved in your account, but not sure where to find the code? Follow these steps:
1. [Click here](https://fonts.adobe.com/) to access the Adobe Fonts dashboard.
2. Log into your Adobe account.
3. In the upper right corner of your dashboard screen, click **Manage fonts**.
4. Select the **Web Projects** tab.
5. Find your first piece of embed code in the **Embed Project** section.
6. To access your font-family CSS code, click the font image on the left.
7. Scroll down to the Details section, to **How to Use**.
8. Find your CSS code under **Web**.
**Note:** For more details on how to update CSS font code, take a look at [this guide](https://helpx.adobe.com/fonts/using/css-selectors).