---
title: "Customizing header font"
slug: "header-font-style"
description: "Header fonts are the captain of the main content as it leads the reader with the introduction for the main content. They are usually larger, and so generally considered  the higher impact text in the content."
tags: ["CSS Snippets"]
updated: 2026-06-20T06:27:34Z
published: 2026-06-20T06:27:34Z
canonical: "docs.document360.com/header-font-style"
---

> ## 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.

# Customizing header font

The **Change heading font** CSS snippet lets you update the font family and color applied to heading tags (H1–H6) across your entire knowledge base site. The default header font in Document360 is **Montserrat**. Header fonts are the most visible typographic element in your articles - they lead readers through the content structure and set the visual tone for the entire knowledge base.

---

## How to customize the header font

1. Navigate to {{variable.Settings}} (<span class="fa-solid fa-gear"></span>) > {{variable.Knowledge base site}} in the left navigation bar of the Knowledge base portal.
2. In the left navigation pane, navigate to **Site customization**.
3. Click **Custom CSS & JavaScript**.
<img src="https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1770890215248.png" class="article_image" alt="Site customization page showing the Custom CSS and JavaScript option">

4. Select the **CSS** tab, then click **Add code snippets** in the top right.
5. Click **Change heading font**. The snippet is inserted into the CSS editor.
6. Replace the `font-family` value with your desired font name.
7. Replace the `color` value with your desired heading color (HEX code).
8. Click **Save** or press **Ctrl + S**.

<img src="https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Site-Customization-header-font.png" class="article_image" alt="CSS editor showing the Change heading font snippet with font family and color values">

The updated font is applied to all H1–H6 heading tags across the entire knowledge base.

:::(Info) (<span class="fa-regular fa-circle-exclamation"></span> NOTE)
Montserrat is the default header font for all `<H>` tags. The modification applies to all heading levels and the entire knowledge base.
:::

---

## Best practices

- **Choose a font that contrasts with the body font** - using a different font for headings and body content creates a clear visual hierarchy and improves scannability.
- **Prefer sans-serif for technical documentation** - sans-serif fonts are the most commonly used for headings in technical documentation as they are clean and easy to read at larger sizes.
- **Always include a fallback** - add a generic family (`sans-serif` or `serif`) as the last value in your `font-family` declaration. If the primary font fails to load, the browser falls back gracefully.
- **Use the same font across heading levels** - changing all H tags to the same font keeps the hierarchy consistent. If you need to differentiate H1 from H2–H4, use font size and weight rather than different font families.