Plans supporting the integration of third party tools in knowledge base site
| Professional | Business | Enterprise |
|---|---|---|
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 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
NOTE
You can also configure custom fonts other than the Google Fonts by utilizing the appropriate HTML and CSS code.
Get the Google font code details
Go to Google fonts webpage.
Select the desired font, and the font page appears with the available styles.
At the top right corner, click Get font and select Get embed code.
In the Web section, you'll find the embed code specific to your chosen font.
Copy the code and head back to Document360.
Append the code in custom HTML
In the Document360 portal, go to Settings > Knowledge base site > Integrations.
Navigate to Custom HTML and click Add.
Select the
Header (above </head>)option which will be the default selection.Paste the link in the Header section copied in step 5.
Once done, click Add.
Append the code in custom CSS
Navigate to Settings (
) > Knowledge base site > Customize site > Custom CSS & JavaScript in the Knowledge base portal. From the left navigation pane, click on the CSS tab.
Click Add code snippets on the top right of the code space.
Select the Change body text font option, and the below code appears.
body, article {
font-family: "Source Sans Pro", sans-serif; /*Replace your body font family*/
color: #222222; /*Font color*/
}In addition to the body selector, include the article selector in the provided code snippet.
Replace the
font-family: "Source Sans Pro", sans-serif;with the font details copied in step 5. (CSS rules to specify families).Add the desired font color.
Click Save on the top right.
Outcome
