Add fonts to your knowledge base theme

Last Update: Oct 2024 • Est. Read Time: 2 MIN
To check plan availability, see the pricing page.

Along with customizing your knowledge base theme, you can also use custom or Google fonts that better match your organization's branding.

Who can access this feature?
User typesContent administrators can access knowledge base settings.


In this article:

Add a custom font

You can use a custom font in your knowledge base theme.

  1. Download and host the custom font files.
  2. Go to Settings > Knowledge Base > Theme.
  3. Select the theme your knowledge base is using. If using the visual editor, go to More Options and select Go to Code Editor.
  4. Select Create New Draft.
  5. Select Add and create a file using the following options:
    1. Theme Target: Global
    2. File Name: font
    3. File Type: JS
  6. Select Create.
  7. Copy this script and paste it into the new file.
    document.addEventListener("DOMContentLoaded", function(event) {  var scriptWOFF = document.createElement("script");
      var scriptWOFF2 = document.createElement("script");
      
      scriptWOFF.src = "https://insert-hosted-custom-font-link";
      scriptWOFF2.src = "https://insert-hosted-custom-font-link";
      
      document.head.appendChild(scriptWOFF);
      document.head.appendChild(scriptWOFF2);
    });
  8. Open the styles.css file and make the following changes:
    • Add your font-face declaration:
      @font-face {  font-family: "Name of Font";
        src: url("https://insert-hosted-custom-font-link.woff2") format("woff2"),
             url("https://insert-hosted-custom-font-link.woff") format("woff");
      }
    • Add your custom font override in your CSS declarations (all * and html selectors):
      * {  font-family: "Name of Font" !important;
      }
      
      html {
        font-family: "Name of Font" !important;
      }
    • If you created your theme using the Midtown theme as the default, update your root CSS font variables to use the custom font override below.
      :root {  --headingsAndButtonsFont: "Name of Font" !important;
        --bodyTextFont: "Name of Font", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
      }

Note: If you are updating your theme and don't see the change take effect, this could be due to your Kustomer knowledge base not having access to the font resource you are hosting. When you host this font, we recommend either of the following best practices to avoid any resulting CORS errors:

  • Host the file on a public server that does not limit access.
  • Add your knowledge base as a permitted domain to your CORS policy.

Add a Google font

You can use a Google font in your knowledge base theme.

  1. Go to Settings > Knowledge Base > Theme.
  2. Select the theme your knowledge base is using. If using the visual editor, go to More Options  and select Go to Code Editor.
  3. Select Create New Draft.
  4. Select Add and create a file using the following options:
    • Theme Target: Global
    • File Name: font
    • File Type: JS
  5. Select Create.
  6. Copy this script and paste it into the new file.
    document.addEventListener("DOMContentLoaded", function(event) {  var link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = "https://fonts.googleapis.com/css?family=Font+Name";
      document.head.appendChild(link);
    });
  7. Open the styles.css file and make the following changes: 
    • Add your custom font override in your CSS declarations:
      * {     font-family: "Name of Font" !important; 
      }
      
      html {
        font-family: "Name of Font" !important;
      }
    • If you created your theme using the Midtown theme as the default, update your root CSS font variables to use the custom font.
      :root {
        --headingsAndButtonsFont: "Name of Font" !important;
        --bodyTextFont: "Name of Font", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
      }