This content is currently unavailable in Spanish. You are viewing the default (English) version.

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

  1. Go to Google fonts webpage
    1_Screenshot-Google_font_page

  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
    2_Screenshot-Google_font_page_selected_family

  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
    Please copy the text available below this section and paste it into your desired space

Append the code in custom HTML

3_Screenshot-Custom_html_font_integration

  1. In the Document360 portal, go to SettingsKnowledge base siteIntegrations

  2. Click New integration, and the Add new integration blade appears on the right
    4_Screenshot-Custom_html_font

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

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

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

Append the code in custom CSS

5_Screenshot-Custom_css_font

  1. Go to SettingsKnowledge base siteCustom CSS & JavaScript, and the Custom CSS tab is the default selection

  2. 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*/ 
}

6_Screenshot-Custom_css_font_save

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

  2. Add the desired font color

  3. Click Save


Outcome

7_Screenshot-Custom_font_outcome