---
title: "How to configure a custom header font in the knowledge base"
slug: "how-to-configure-a-custom-header-font-in-the-knowledge-base"
description: "Get the header 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: ["CSS Snippets", "Custom font"]
updated: 2025-12-29T10:24:29Z
published: 2026-01-31T09:30:11Z
excludeFromExternalSearch: true
---

> ## 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 header font in the knowledge base

Document360 provides a list of common header fonts used in documentation. However, you can configure your desired header 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.

As a use case, check out the below solution to configure a Google font in Document360.

---

## Solution

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)

### Get the Google font code details

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. Click **Copy code**to copy the code and head back to Document360.

![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Google%20fonts%20GIF.gif)

### Append the code in custom HTML

1. In the Document360 portal, go to **Connections**> **Integrations**.
2. Navigate to **Custom HTML** and click **Add**. Select the `Header (above </head>)` option is the default selection.
3. Paste the link in the **Header** section copied in step 5.
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

1. Navigate to **Settings** (<nor class="fa-solid fa-gear" data-tomark-pass=""></nor>) > **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript** in the Knowledge base portal.

![Site customization options including CSS, JavaScript, and theme settings for a knowledge base.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&amp;%20js.png)
2. The **Custom CSS** tab is the default selection. Click the **Add code snippets** button.
3. Select the **Change heading font** option, and the below code appears.

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

1. Replace the `font-family: "Source Sans Pro", sans-serif;` with the font details copied in step 5. *(CSS rules to specify families)*
2. Add the desired font color.
3. Click **Save**.

![CSS code snippet showing font family and color settings for a webpage body.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Heading%20font%20-%20custom%20css.png)

---

## Outcome

![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Before%20After%20Header%20font%20change.png)