---
title: "How to configure a custom font in the knowledge base"
slug: "how-to-configure-a-custom-font-in-the-knowledge-base"
description: "Get the font details and add the font link to the header section in Custom HTML. Then, add the font family details in the Custom CSS. Get the Google font code details → Append the code in custom HTML → Append the code in custom CSS"
tags: ["Font", "CSS Snippets", "Custom font"]
updated: 2025-12-29T10:37:58Z
published: 2026-01-31T17:30:02Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to configure a custom font in the knowledge base

Document360 provides a list of standard fonts used in documentation. However, you can configure your desired font in the knowledge base. Get the font details and add the font link to the header section in Custom HTML. Then, add the font family details in the Custom CSS.

---

## Steps to configure a custom Google font in Document360

The below three steps are involved in configuring the desired Google font in Document360: Step 1: [Get the Google font code details](/help/docs/how-to-configure-a-custom-font-in-the-knowledge-base#get-the-google-font-code-details) Step 2: [Append the code in custom HTML](/help/docs/how-to-configure-a-custom-font-in-the-knowledge-base#append-the-code-in-custom-html) Step 3: [Append the code in custom CSS](/help/docs/how-to-configure-a-custom-font-in-the-knowledge-base#append-the-code-in-custom-css)

> [!NOTE]
> ** NOTE
> 
> You can also configure custom fonts other than the Google Fonts by utilizing the appropriate HTML and CSS code.

### Get the Google font code details

To begin using a custom font in your knowledge base, you first need to retrieve the embed code from Google Fonts.

1. Go to [Google fonts](https://fonts.google.com/) webpage.
2. Select the desired font, and the font page appears with the available styles.
3. At the top right corner, click **Get font** and select **Get embed code**.

In the **Web** section, you'll find the embed code specific to your chosen font.
4. **Copy** the code and head back to Document360.

### Append the code in custom HTML

Once you’ve copied the embed code, the next step is to insert it into your Document360 project’s custom HTML settings. To do so,

1. Navigate to **Connections > Integrations**in the left navigation bar in the **Knowledge base portal**.
2. Navigate to **Custom HTML** section and click **Add**.

The `Header (above </head>)` option which will be the default selection.
3. Paste the link in the **Header** section copied previously.
4. Once done, click **Add**.

![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Configuring%20custom%20header%20font.gif)

### Append the code in custom CSS

After adding the embed code to your HTML, you’ll need to apply the font style by adding a CSS code to update the text appearance across your site. To do so,

1. Navigate to **Settings** (**) > **Knowledge base site** in the left navigation bar in the **Knowledge base portal**.
2. In the left navigation pane, navigate to **Site customization** > **Custom CSS & JavaScript**.

![Site customization options for branding, theme selection, and custom CSS in Document360.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&%20js.png)
3. From the left navigation pane, click on the **CSS** tab.
4. Click **Add code snippets** on the top right of the code space.
5. Select the **Change body text font** option, and the below code appears.

```css
body, article {
  font-family: "Source Sans Pro", sans-serif;    /*Replace your body font family*/ 
  color: #222222;    /*Font color*/ 
}
```

![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Change%20body%20text%20font.png)
6. In addition to the **body** selector, include the **article** selector in the provided code snippet.
7. Replace the `font-family: "Source Sans Pro", sans-serif;` with the font details copied in step 5. *(CSS rules to specify families)*.
8. Add the desired font color.
9. Click **Save**on the top right.

The selected font will now be applied to your Knowledge base content. Visit the Knowledge base site to preview the changes in effect.