Custom fonts

Last Modified on 05/29/2024 5:28 pm EDT

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:

Sample web font URL

If you're using a web font URL, follow the Adding custom fonts via external URL for use in all Article text or Headers instructions.

Custom font files

What if your font isn't referenced via URL, but through specific files? For example:

Your company has its own set of official fonts
You downloaded font files from a web font
You paid for a proprietary font

In these scenarios, you'll need to add the font files to your File Library. To do so:

Go to Library > Files.
Select the + Add Files button.
Either drag and drop font files in, or browse to them, select, and click Open to add them to the Upload Files pane.
Once you've added all the font files you need, click the Upload Files... button.
Sample font files for upload; Source Sans Pro
You will need the URL for each font file you uploaded to reference it later on. To get the URL, click on the file to open the file's metadata at the bottom of the library.

Open the file's metadata
Then click the Copy Link option to copy the file's URL to your clipboard.

Copy Link for the file

If you're using a font file uploaded to KnowledgeOwl, follow the Adding custom fonts from KnowledgeOwl for use in all Article text or Headers instructions.

Adding custom fonts via external URL for use in all Article text or Headers

Go to Settings > Style.
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.
For the font class you want to update, select Custom Web Font from the dropdown (it is the last menu option).
Set the size and weight for the font.
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).
For the Font URL: if you are using a URL from somewhere outside of KnowledgeOwl (such as Google Fonts), paste the URL directly:
Sample Custom Web Font
Optional: To set one of these fonts as the default for the search bar, comments placeholder, and other non-article and non-header text, follow the instructions below to Use custom font as default font for placeholders.
You can Preview your changes to see how they look.
Be sure to Save once you've finished making changes.

Adding custom fonts from KnowledgeOwl for use in all Article text or Headers

Go to Settings > Style.
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.
For the font class you want to update, select Custom Web Font from the dropdown (it is the last menu option).
Set the size and weight for the font.
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).
For the Font URL: If you are using a URL for a file you've uploaded to KnowledgeOwl, you will need to edit the URL to include your knowledge base's URL. (Files stored in KnowledgeOwl are stored on Cloudfront, but using a Cloudfront URL will prevent your font from loading properly.) The URL you copied for your file likely looks something like this:
```
https://dyzz9obi78pm5.cloudfront.net/app/image/id/5d3f365dec161c2860e78829/n/sourcesanspro-regular.ttf
```
Replace the https://whatever.cloudfront.net portion of the URL with your knowledge base's subdomain and domain. For example:
```
https://support.knowledgeowl.com/app/image/id/5d3f365dec161c2860e78829/n/sourcesanspro-regular.ttf
```
Sample Custom Web Font using a KnowledgeOwl file and subdomain

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.
Under the preview pane, be sure Custom CSS is selected.

Copy the CSS below and paste it into the top of your Custom CSS.

@font-face {
font-family: MyFontFamily;
src: url(/app/image/id/626ac8eb4c03de5903752be1/n/myfontregular.otf);
}

Replace MyFontFamily in row 2 with the Font Name you used before.
Replace the src url in row 3 with the URL for the font. If you're using a file stored in the File library, remove the portion before /app/image/id. So if the file URL looks like this:
```
https://dyzz9obi78pm5.cloudfront.net/app/image/id/5d3f365dec161c2860e78829/n/sourcesanspro-regular.otf
```
I would use this URL:
```
/app/image/id/5d3f365dec161c2860e78829/n/sourcesanspro-regular.otf
```
Optional: To set one of these fonts as the default for the search bar, comments placeholder, and other non-article and non-header text, follow the instructions below to Use custom font as default font for placeholders.
You can Preview your changes to see how they look.
Be sure to Save once you've finished making changes.

Use custom font as default font for placeholders

If you'd also like this font family to be used as the default font for things like the search bar placeholder, comments placeholder, and more:

In Settings > Style, under the preview pane, be sure Custom CSS is selected.

Copy the CSS below and paste it into the top of your Custom CSS. (If you already added the @font-face rule, just copy the second portion)

@font-face {
font-family: MyFontFamily;
src: url(/app/image/id/626ac8eb4c03de5903752be1/n/myfontregular.otf);
}

.hg-site .hg-project-name, body, .form-control {
font-family: MyFontFamily, sans-serif;
}

Replace MyFontFamily in rows 2 and 7 with the Font Name you used before.
Replace the src url in row 3 with the URL for the font. If you're using a file stored in the File library, remove the portion before /app/image/id. So if the file URL looks like this:
```
https://dyzz9obi78pm5.cloudfront.net/app/image/id/5d3f365dec161c2860e78829/n/sourcesanspro-regular.otf
```
I would use this URL:
```
/app/image/id/5d3f365dec161c2860e78829/n/sourcesanspro-regular.otf
```
You can Preview your changes to see how they look.
Be sure to Save once you've finished making changes.

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 entirely via Custom CSS rather than the Fonts option. To do so:

Go to Settings > Style.
Below the preview pane, be sure Custom CSS is selected.

Copy the CSS below and paste it into the top of your Custom CSS:

@font-face {
font-family: MyFontFamily;
src: url(/app/image/id/626ac8eb4c03de5903752be1/n/myfontregular.otf);
}

.documentation-article h1, .cke_editable h1,
.documentation-article h2, .cke_editable h2,
.documentation-article h3, .cke_editable h3,
.documentation-article h4, .cke_editable h4,
.documentation-article h5, .cke_editable h5,
.documentation-article h6, .cke_editable h6,
.hg-article-body, .hg-article-body p, .cke_editable, .cke_editable p,
.hg-site .hg-project-name, body, .form-control {
font-family: MyFontFamily, sans-serif;
}

Replace MyFontFamily in rows 2 and 14 with the name of the font you're using.
Replace the src url in row 3 with the URL for the font. If you're using a file stored in the File Library, remove the portion before /app/image/id. So if the file URL looks like this:
```
https://dyzz9obi78pm5.cloudfront.net/app/image/id/5d3f365dec161c2860e78829/n/sourcesanspro-regular.otf
```
I would use this URL:
```
/app/image/id/5d3f365dec161c2860e78829/n/sourcesanspro-regular.otf
```
Adjust the CSS block to include only the areas you'd like to target with the given font.
You can Preview your changes to see how they look.
Be sure to Save once you've finished making changes.

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, add something like this to your Custom CSS in Settings > Style:

.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 (used for most of the placeholder text in the search and other forms). 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

As mentioned above, 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);
}

Was this article helpful?

Knowledge 1 Knowledge 2 Knowledge From