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.

As of 22 Nov 2025, the Markdown editor has been upgraded from v1.4.10 to v3.2.2. The toolbar, layout, icons, and editor structure remain unchanged.

How to configure a custom font in the knowledge base

  • Published on Jun 20, 2026
  • 3 minute(s) read
Prev Next

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.

  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

  1. Navigate to Connections > Integrations in the left navigation bar in the Knowledge base portal.

  2. Navigate to the Custom HTML section and click Add.

    The Header (above </head>) option is selected by default, keep this selection.

  3. Paste the embed code copied in step 4 into the Header section.

  4. Click Add.

    Adding the Google Font embed code to the Custom HTML Header section in Document360

Step 3 - Apply the font in Custom CSS

  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.

    Custom CSS and JavaScript settings panel in the Document360 Knowledge base portal

  3. From the left navigation pane, select the CSS tab.

  4. Click Add code snippets at the top right of the code space.

  5. Select the Change body text font option. The following code template appears:

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

  1. 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.
  2. Replace font-family: "Source Sans Pro", sans-serif; with the CSS rules to specify families from the embed code copied in step 4.
  3. Update the color value with your desired font color.
  4. 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.
Related articles