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
Step 2: Append the code in custom HTML
Step 3: Append the code in custom CSS

Get the Google font code details

  1. Go to Google fonts webpage

3_ScreenGIF-Google_font_custom_header_font

  1. Select the desired font, and the font page appears with the available styles

  2. At the top right corner, click Get font and select Get embed code

  3. In the Web section, you'll find the embed code specific to your chosen font

  4. Copy the code and head back to Document360

Append the code in custom HTML

2_ScreenGIF-Append_the_code_in_custom_HTML

  1. In the Document360 portal, go to SettingsKnowledge base siteIntegrations

  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

Append the code in custom CSS

5_Screenshot-Header_Append_the_code_in_custom_CSS

  1. Go to SettingsKnowledge base siteCustom CSS & JavaScript, and the Custom CSS tab is the default selection

  2. Click the Add code snippets below the Custom CSS tab, and a Add code snippets blade appears

  3. Select the Header tag font style option, and the below code appears

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


Outcome

7_Screenshot-Custom_font_outcome