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.
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 is the default selection. -
Paste the link in the Header section copied in step 5.
-
Once done, 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 Add code snippets below the Custom CSS tab, and a Add code snippets blade appears.
-
Select the Body font style option, and the below code appears.
In addition to the "body" selector, include the "article" selector in the provided code snippet.
body, article {
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. (CSS rules to specify families). -
Add the desired font color.
-
Click Save.
Outcome
