See related
Add fonts to your knowledge base theme
Last Update: Oct 2024 • Est. Read Time: 2 MINTo 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 types | Content administrators can access knowledge base settings. |
In this article:
Add a custom font
You can use a custom font in your knowledge base theme.
- Download and host the custom font files.
- Go to Settings > Knowledge Base > Theme.
- Select the theme your knowledge base is using. If using the visual editor, go to More Options and select Go to Code Editor.
- Select Create New Draft.
- Select Add and create a file using the following options:
- Theme Target: Global
- File Name: font
- File Type: JS
- Select Create.
- 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); });
- 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; }
- Add your font-face declaration:
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.
- Go to Settings > Knowledge Base > Theme.
- Select the theme your knowledge base is using. If using the visual editor, go to More Options and select Go to Code Editor.
- Select Create New Draft.
- Select Add and create a file using the following options:
- Theme Target: Global
- File Name: font
- File Type: JS
- Select Create.
- 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); });
- 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; }
- Add your custom font override in your CSS declarations: