How to configure a custom font in the knowledge base?

Document360 provides a list of common fonts used in documentation. However, you can configure your desired 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 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
   

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

3. To view the code details of the desired font style, select the respective '⊕' icon on the right
   

4. Click the View selected families icon on the top right

5. The Selected family blade appears with the below details of the selected font
   a. Review - The selected font name and style details appear here
   b. Use on the web - Code details of the font appear here
   - Make sure that the <link> option is selected
   - Copy the link available under the link section and paste it into your desired space

   c. CSS rules to specify families - Font family details appear here
   Copy the text available below this section and paste it into your desired space

Append the code in custom HTML

6. In the Document360 portal, go to Settings → Knowledge base site → Integrations

7. Click New integration, and the Add new integration blade appears on the right
   

8. Select Cutsom HTML and the Header (above </head>) option is the default selection

9. Paste the link in the Header section copied in step 5. b. (link available under the link section)

10. Make sure that the Status toggle is enabled and click Add

Append the code in custom CSS

11. Go to Settings → Knowledge base site → Custom CSS & JavaScript, and the Custom CSS tab is the default selection

12. Click the Snippets below the Custom CSS tab, and a Code snippets blade appears on the right
    Select the Body 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*/ 
}

13. Replace the font-family: "Source Sans Pro", sans-serif; with the font details copied in step 5. c. (CSS rules to specify families)

14. Add the desired font color

15. Click Save

Outcome