With the Help Center custom font feature, you can upload your own font file to match your brand style.
Supported file formats:
TTF, OTF, EOT, WOFF, WOFF2.
Important terminology:
A font family - is a set of fonts that share a similar design but vary in attributes like weight, width, and style. For example, a font family might include Light, Regular, and Bold weights, each with its own Italic version.
An italic version - is a style where the characters are slanted to the right. Italic fonts are often used for emphasis, titles, or to set apart quotes and citations from the main text.
Font weight - refers to the thickness of the characters in a typeface. Common weights include Light, Regular, Medium, Semi Bold, Bold, and Extra bold.
If you use Google Fonts (preloaded), these settings are applied automatically and no extra steps are needed. But when using a custom font, you must upload multiple font files for each font weight and ensure all settings are correct (the only exception is Variable fonts).
Get started
Upload a custom font
Go to ⚙️ Help Center Settings and open the Styling tab. Below the Shared elements section you'll find an option to Manage custom fonts.
Click Upload font to get started.
If you are choosing to upload a font of your choice, please ensure you have permission to use the font and review any applicable license terms to follow relevant obligations before uploading the font to use it on your Help Center.
Font weights
To ensure that all text elements display properly in the Help Center, you should upload the following font weights:
Regular
Medium
Semi Bold
Bold, and
Italics for each.
The multi-select feature allows users to upload multiple font files at once.
In the Help Center, we use Regular, Medium, Semi Bold, and Bold font weights. If teammates forget to upload a specific weight or the font family does not have a font file for a given weight/style combination, the browser picks the closest one to render the text. For example, if you upload only Medium and Bold but forget Regular, then Medium will replace all Regular styles.
Make sure there are no duplicate font files with the same properties. If a mistake happens, a banner will appear saying, "You already have another font file in this font family with the same weight and style." If the banner is ignored and the settings are saved, one of the font files will be picked at random.
Variable fonts
You can upload a variable font instead of multiple font weights. You won't have the option to adjust the font's appearance, however, the browser will automatically adjust the font weight as needed.
You'll still need to upload a separate variable font file for Italic style.
To upload a variable font, choose the font file labelled Variable. Then, pick the "Variable" option under the Font weight setting once it's uploaded.
Check font settings
After uploading font files, you'll notice each file has its own accordion for adjusting settings.
The accordion names are generated automatically from the file information. They update automatically after settings are adjusted.
By default, these accordions use information pulled directly from the files. However, this information can sometimes be incorrect. You should check and, if needed, update this information to ensure all fonts display correctly.
Things to check/update if needed:
All font files belonging to the same font family must have the same font family name.
All font files should point to the correct font weight. For example, if you uploaded a Rubik Regular, you need to make sure that the option “Regular (400)” is selected under the Font weight setting.
All font files should also point to the correct font style. For example, if you uploaded a Rubik Regular, you need to make sure that the option “Normal” is selected under the Style setting.
Select the custom font
After uploading and checking all the font files, return to Font settings (in Help Center Settings > Styling tab) and select your custom font from the list. Uploaded custom fonts will show up under Custom Fonts in the dropdown.
Note:
Italic font is only used in the article body, to preview italic font in the Help Center we recommend previewing an article page which will have sample italic text.
If you delete all custom font files (that are selected in the Font setting), the Font will default to System Default.
While the custom font is loading on the web page, the System Default font will be shown in the Help Center. This might take a few seconds.
There is no option to delete font files in bulk, you'll need to do it one by one.
Troubleshooting
Font not showing as expected
E.g. I’m seeing normal text being bold, italic where it shouldn’t be.
Make sure that the font file you have assigned to the weight/style combination is in fact meant to be for that combination. Usually the font file name includes the variation along with the font family name. For example, here’s a misconfigured font variation:
The file is meant to be for Medium/Condensed/Italic but it is incorrectly assigned to Regular/Normal.
Seeing two font families for a custom font when there should be one
This means you have uploaded 2 font files and used different Font family names, use the same Font family name for both.
FAQs
Can I change the colour of text in an article?
Can I change the colour of text in an article?
No, it is not possible to edit the colour of text in articles however you can use coloured callouts to highlight important information.
💡Tip
Need more help? Get support from our Community Forum
Find answers and get help from Intercom Support and Community Experts