---
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: 2026-06-20T09:48:34Z
published: 2026-06-20T09:48:34Z
canonical: "docs.document360.com/how-to-configure-a-custom-header-font-in-the-knowledge-base"
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 includes a set of built-in header fonts, but you can go beyond the default options by loading any font from Google Fonts into your knowledge base. This is done in two parts: loading the font file via Custom HTML, then applying it to your content via Custom CSS. The process takes about five minutes and gives you access to the full Google Fonts library, over 1,500 typefaces, to match your brand or documentation style.
---
## When to use this
Use this customisation when you want to:
- Apply a specific Google Font that is not included in Document360's default font list.
- Match your documentation typography to your product or brand guidelines.
- Improve the visual consistency between your knowledge base and your website or product interface.
---
## Before you begin
- You need access to **Connections** > **Integrations** > **Custom HTML** in the Knowledge base portal to complete Step 2.
- You need access to **Settings** () > **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript** to complete Step 3.
- This guide uses Google Fonts as the example source, but the same approach works with any web font that provides an HTML embed link and a CSS `font-family` declaration.
- The process involves three sequential steps: get the font code, add it to Custom HTML, then apply it in Custom CSS. All three steps are required for the font to render correctly.
---
## How to configure a Google Font in Document360
### Step 1 - Get the Google Font embed code
1. Go to [Google Fonts](https://fonts.google.com/).
2. Select the desired font. The font page appears with available styles.
3. At the top right, click **Get font**, then select **Get embed code**.
In the **Web** section, the embed code for your chosen font appears.
4. Click **Copy code** to copy the embed code, then return to Document360.
---
### Step 2 - Add the font link to Custom HTML
5. In the Document360 portal, navigate to **Connections** > **Integrations**.
6. Select **Custom HTML** and click **Add**. The `Header (above )` option is selected by default, keep this selection.
7. Paste the embed code copied in step 4 into the **Header** section.
8. Click **Add**.
---
### Step 3 - Apply the font in Custom CSS
9. Navigate to **Settings** () > **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript** in the Knowledge base portal.
10. The **Custom CSS** tab is selected by default. Click the **Add code snippets** button.
11. Select the **Change heading font** option. The following code template appears:
```plaintext
body {
font-family: "Source Sans Pro", sans-serif; /*Replace your body font family*/
color: #222222; /*Font color*/
}
```
12. Replace `font-family: "Source Sans Pro", sans-serif;` with the CSS rules to specify families from the embed code you copied in step 4.
13. Update the `color` value with your desired font color.
14. Click **Save**.
---
## Outcome
The custom font is now applied across your knowledge base. The before and after below show the difference in typography after completing all three steps.
---
## Best practices
- **Complete all three steps in order.** Loading the font in Custom HTML without applying it in Custom CSS will have no visible effect; the font will be available to the browser but not assigned to any element. Equally, adding a `font-family` declaration in CSS without loading the font file first will cause the browser to fall back to the default font.
- **Use the `font-family` value from the embed code exactly.** Google Fonts provides the precise CSS `font-family` string in the embed code under "CSS rules to specify families." Copy this value exactly, including the fallback stack, to avoid rendering inconsistencies across browsers.
- **Test across browsers after saving.** Font rendering can vary slightly between Chrome, Safari, Firefox, and Edge. Preview your knowledge base in at least two browsers to confirm the font loads and displays correctly.
- **Keep the fallback font.** The `sans-serif` fallback in `font-family: "Your Font", sans-serif;` ensures readers still see a readable font if the Google Font fails to load (for example, in environments that block external requests). Always include a generic fallback.
- **Consider font weight and performance.** Google Fonts lets you select specific weights (Regular, Bold, etc.) when generating the embed code. Load only the weights you need — loading all available weights increases page load time.