Custom Fonts

Our knowledge base theme builder allows you to choose from a variety of fonts, sizes, and weights. We even have pre-built font pairs picked by a designer.

You can also specify a custom font, either as a web font available via URL, or 1+ custom font files you've downloaded.

These custom fonts can be applied via Custom CSS to very specific font cases, or you can apply them to all Article Text or Header Text using our built-in Custom Web Font options.

Preliminary steps

Regardless of whether you want to apply your custom font to specific types of text or to all Article/Header text, you'll need to have a URL for that font. You can either reference a public URL for a web font, or you can upload a font file you already have and reference the File Library URL for it. Here are sample steps for each.

Get a web font URL

Most web fonts will provide you a URL to reference to include the font on your site:

Custom font files

Your company may have its own set of official fonts, you may have downloaded font files from a web font, or you may have paid for a proprietary font. You'll need to add the font files to your File Library. To do so:

  1. Go to Library > Files.
  2. Click the + Add Files button.
  3. Either drag and drop font files in, or browse to them, select, and click Open to add them to the Upload Files pane.
  4. Once you've added all the font files you need, click the Upload Files... button.
    Sample font files for upload; Source Sans Pro
  5. You will need the URL for each font file you uploaded to reference it later on. To get the URL, click on the file and then copy the URL that opens in the Selected File Info section in the lower left:

Adding custom fonts for use in all Article text or Headers

  1. Go to Settings > Style.
  2. In the Fonts section on the left, select which font classes in your knowledge base you want this custom font applied to: Headers, Article Text, or both. For this example, we'll apply it to Article Text.
  3. For the font class you want to update, select Custom Web Font from the dropdown (it is the last menu option).
  4. Set the size and weight for the font.
  5. Add the Font Name. This should match the font-family name in the URL or CSS for the custom font (Cute Font, in this example).
  6. Paste the URL you have as the Font URL.
    Sample Custom Web Font

    Note: if you've uploaded multiple files (say, a Regular file, Bold file, etc.), reference the URL for the one that is the default weight you want.

  7. Click Save.
  8. See our Best Practices section below for additional recommendations.

Applying custom web fonts via custom CSS

If you'd like to apply your custom font via custom CSS--to apply only in certain cases, rather than all Article text or all Headers--you'll add the custom font via Custom CSS rather than the Fonts option. To do so:

  1. Go to Settings > Style.
  2. In the Custom CSS  section,  at the top of the section above any other Custom CSS you might have, add one @font-face rule for each font file you uploaded. If you've not worked with @font-face rules before, W3schools has a good high-level overview. Here is an example of what that might look like:
    Sample @font-face rules in Custom CSS
  3. With these @font-face rules in place, you can now assign the font-family you created to any Custom CSS, for example:
  4. .hg-article-body strong {
      font-family: 'Source Sans Pro', sans-serif;
    }
  5. Click Save.
  6. See our Best Practices (next section) for additional tips.

Best Practices

Over the years, we've set up a lot of custom fonts for customers. Here are some of the tricks we most recommend following.

Use @font-face rules rather than Custom <head>

Many tutorials on basic website layout will tell you to add custom fonts into the Custom <head>. We don't recommend this in KnowledgeOwl because loading fonts this way does not load them into the Article Editor. If you use Custom <head>, what your content writers and editors will see will be a different font/display than what is displayed on your live knowledge base to your readers.

Test your PDFs and fix fonts that don't load

Some custom fonts will not load in PDFs. You can either leverage an online tool to encode your font in base64 or set PDFs to use a font provided in KnowledgeOwl. To set a different fallback default for PDFs, click on Custom CSS and add something like this:

.hg-pdf .hg-article-body,
.hg-pdf .hg-article-body p,
.hg-pdf .documentation-article h1 {
    font-family: sans-serif;
}

Customize font in form fields

Updating Article text using Custom Web Fonts will not automatically update the fonts in webforms like the Search bar, the Contact Form, etc. To update those to use the same font family, use this CSS in Custom CSS with the appropriate font-family and font style from your web font:

.form-control {font-family: 'Cute Font', sans-serif;}

Set custom font to global default

Updating Header and Article text using Custom Web Fonts will not automatically change the global default fonts.  If you'd like to use a custom font as a global default, add the font-family to the body in Custom CSS, for example:

body {
    font-family: 'Cute Font', sans-serif;
}

Use relative URLs when loading fonts from file library

Some font files require the font URL and the website domain to be the same in order to work. To fix this, upload the font file to your KnowledgeOwl library and use a relative link when referencing it in @font-face, for example:

@font-face {
  font-family: Abingdon;
  src: url(/app/image/id/5cc205568e121c6a65ffb076/n/abingdon-regular.otf);
}