Overriding the Font on Your Knowledge Base

Jarratt Isted Updated by Jarratt Isted

If you're looking to load a fancy new font of your own or simple 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, the Source Sans Pro we use in our template Curve is imported from Google using the following code at the top of our CSS:

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

Then to use the font we override the element body with font-family:

/* Override all text on Curve template */
body {
font-family: 'Source Sans Pro', Helvetica, sans-serif;

If you're using a font from somewhere like Typekit or Fonts.com, you'll likely 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.

Overriding All Text on Curve

Over time the way we've built templates has changed. This means you may have to target a different element to override all the text on your knowledge base. Below is an example on how to change the font on our template Curve.

Paste the code into SettingsCode > CSS and hit Save.

body {
font-family: YOUR-FONT-HERE, sans-serif;

What did you think of this doc?

Using Different List Styles

Add HTML Before the Closing Body Tag

Get in touch