Share:
ClickHelp Documentation

Using Your Own Fonts

In ClickHelp you can add your own fonts. Here are steps that will help you add fonts easily.

  1. Upload Your Font Files to ClickHelp File Storage.
  • Create a root-level folder called Branding (so, you'll put there all files related to your custom styles).

  • Once the folder is created, open it and then drag&drop your unzip font files there.

Now you can close your ClickHelp File Manager and proceed with step 2.

  1. Define your own font family in CSS.

Below, you will find the CSS code that you'll need to add to the project CSS styles for every project - it defines your own font family name, and points to the font files in the File Storage. To open your project CSS file, you can use the Edit CSS command on the Portal Dashboard page in the left-hand navigation bar under your project name.

Or you can open this file from the topic editor while you have any topic of this project open for editing. Click Current Project > Settings > Open for Editing.

So, speaking of your font family name, let's call your custom font family MyFont. Here is the relevant CSS:

 @font-face {
    font-family: MyFont;
    src: url("/resources/Storage/Branding/MyFont.ttf") format("opentype");
}

@font-face {
    font-family: MyFont;
    font-weight: bold;
    src: url("/resources/Storage/Branding/MyFont-Bold.ttf") format("opentype");
}

@font-face {
    font-family: MyFont;
    font-style: italic;
    src: url("/resources/Storage/Branding/MyFont-Italic.ttf") format("opentype");
}

@font-face {
    font-family: MyFont;
    font-weight: bold;
    font-style: italic;
    src: url("/resources/Storage/Branding/MyFont-BoldItalic.otf") format("opentype");
}

Once you open your project CSS file, click Edit and insert the font-face definitions at the very beginning of the file.

If you need to use this font outside of your project topics, in your branding styles (like Home page font, etc), you will also need to add the same font family definitions into your portal branding CSS file. You can open the file by using "Tools | Edit Portal Branding CSS" in the main menu.

We've added the font family definitions in the relevant CSS files. Let's proceed.

  1. Use your font family in your project styles, and don't forget about fallbacks.

To use your own font now, you can just specify the font family name, like this:

body
{
  font-family: MyFont;
}

However, in CSS, it is a common practice to specify fallback fonts, a browser can use if it can't use the very first font specified. We recommend using this fallback approach for your font as well. For example, your font stack may look like this:

body
{
  font-family: MyFont, 'Segoe UI Light', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

This is just a recommendation, you are free to use your own font stack sequence - you may want to check on this with your design or web teams.

  1. Add your custom font to the Fonts drop-down list in your portal.

After step 3, you can already use your font in your CSS styles that apply to your content. If you also would like to see your custom font in the Fonts drop-down list of the topic editor, please contact us at support@clickhelp.co - we will add a new font name to that list for your portal.

Information When you can use CSS for styling, we always recommend doing so instead of using inline styling for text elements.

That is, if your heading 2 elements inside a topic must have 16px font size, it is best to define this through your project CSS instead of selecting each heading 2 element and applying the font size through the Size drop-down. Using CSS makes it easier to maintain your styles going forward and ensure they are used consistently.