--- 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: ["CSS Snippets", "Custom font", "Font"] updated: 2026-06-20T09:49:40Z published: 2026-06-20T09:49:40Z canonical: "docs.document360.com/how-to-configure-a-custom-font-in-the-knowledge-base" --- > ## 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 includes a set of standard built-in fonts, but you can apply any Google Font or any other web font to your knowledge base body text. This is done in two parts: loading the font file via Custom HTML, then applying it to your content via Custom CSS. The process gives you access to the full Google Fonts library to match your brand or documentation style.

NOTE

You can also configure custom fonts other than Google Fonts by using the appropriate HTML embed link and CSS font-family declaration from your font provider.

--- ## When to use this Use this customization when you want to: - Apply a specific Google Font to body text 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. - All three steps are required for the font to render correctly. Loading the font without applying the CSS, or applying the CSS without loading the font, will have no visible effect. --- ## How to configure a custom body text font ### 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** to copy the embed code, then return to Document360. --- ### Step 2 - Add the font link to Custom HTML 5. Navigate to **Connections** > **Integrations** in the left navigation bar in the Knowledge base portal. 6. Navigate to the **Custom HTML** section 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**. ![Adding the Google Font embed code to the Custom HTML Header section in Document360](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Configuring%20custom%20header%20font.gif) --- ### Step 3 - Apply the font in Custom CSS 9. Navigate to **Settings** (

) > **Knowledge base site** in the left navigation bar in the Knowledge base portal. 10. In the left navigation pane, navigate to **Site customization** > **Custom CSS & JavaScript**. ![Custom CSS and JavaScript settings panel in the Document360 Knowledge base portal](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&%20js.png) 11. From the left navigation pane, select the **CSS** tab. 12. Click **Add code snippets** at the top right of the code space. 13. Select the **Change body text font** option. The following code template appears: ```css body, article { font-family: "Source Sans Pro", sans-serif; /*Replace your body font family*/ color: #222222; /*Font color*/ } ``` ![Add code snippets panel showing the Change body text font option selected](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Change%20body%20text%20font.png) 14. Ensure the `article` selector is included alongside the `body` selector in the snippet; both are needed to apply the font across article content as well as the wider page. 15. Replace `font-family: "Source Sans Pro", sans-serif;` with the CSS rules to specify families from the embed code copied in step 4. 16. Update the `color` value with your desired font color. 17. Click **Save** at the top right. The selected font is now applied to your knowledge base. Visit the knowledge base site to preview the changes. --- ## Best practices - **Complete all three steps in order.** Loading the font in Custom HTML makes it available to the browser, but it does not apply it. The CSS in Step 3 tells the browser where to use it. Both steps are required, and must reference the same font name. - **Include both `body` and `article` selectors.** The `article` selector ensures the font applies inside article content, not just the surrounding page elements. Without it, body text in articles may not change. - **Use the `font-family` value from the embed code exactly.** Google Fonts provides the precise CSS `font-family` string under "CSS rules to specify families." Copy this value exactly, including the fallback stack, to avoid rendering inconsistencies across browsers. - **Keep the fallback font.** The `sans-serif` fallback in `font-family: "Your Font", sans-serif;` ensures readers see a readable font even if the Google Font fails to load. Always include a generic fallback. - **Load only the font weights you need.** When copying the embed code from Google Fonts, select only the specific weights your documentation uses (for example, Regular 400 and Bold 700). Loading all available weights increases page load time without benefit. - **Test in your live knowledge base after saving.** Font changes apply site-wide. Open several article types after saving to confirm the font loads and displays correctly.