Skip to main content
Support

Overriding the Font on Your Knowledge Base

If you're looking to load a fancy new font of your own or simply want to make a small change to one element, you can override fonts on your knowledge base with a little CSS.

River Sloane
Updated by River Sloane
1 min read

If you're looking to load a fancy new font of your own or simply want to make a small change to one element you can override fonts on your knowledge base with a little CSS.

Not sure how to target an element? Follow our guide about finding CSS selectors.

Loading or Importing Fonts

Depending on the font you'd like to use, you may have to import or load the font from an external source.

For example, to use Source Sans Pro from Bunny Fonts, add the following code at the top of your CSS:

@import url('https://fonts.bunny.net/css?family=Source+Sans+Pro');

Then to use the font, override font-family:

body :not(.fa) {
    font-family: 'Source Sans Pro', Helvetica, sans-serif;
}

If you're using a font from somewhere like Typekit or Fonts.com you'll need to paste in a JavaScript snippet as these are loaded externally.

Be sure to include backup fonts like we have with Helvetica and sans-serif.

What did you think of this doc?

Previous Condense Top Article Spacing on Bars V4 Next Using Different List Styles