- Print
- DarkLight
- PDF
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
Go to Google fonts webpage
Select the desired font, and the font page appears with the available styles
To view the code details of the desired font style, select the respective '⊕' icon on the right
Click the View selected families icon on the top right
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 spacec. 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
In the Document360 portal, go to Settings → Knowledge base site → Integrations
Click New integration, and the Add new integration blade appears on the right
Select Cutsom HTML and the
Header (above </head>)
option is the default selectionPaste the link in the Header section copied in step 5. b. (link available under the link section)
Make sure that the Status toggle is enabled and click Add
Append the code in custom CSS
Go to Settings → Knowledge base site → Custom CSS & JavaScript, and the Custom CSS tab is the default selection
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*/
}
Replace the
font-family: "Source Sans Pro", sans-serif;
with the font details copied in step 5. c. (CSS rules to specify families)Add the desired font color
Click Save