Document360 provides a list of standard 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
Please 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 Custom HTML and the
Header (above </head>)
option is the default selection -
Paste 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