Why use a custom font?

Preserving consistency and rhythm of a product adoption experience is only possible if you could blend in all onboarding content with your own website’s UI elements and style.

How to add a custom font to a Theme?

You only have 3 steps to go through:

1. Define

First, you need to find out which type of font is used in your web platform. If you do not know how to inspect your source, you can follow the steps here.

2. Configure

• Login to your UserGuiding panel and go to Themes under Engagement to create a new theme or update your default theme.
• Click on the Typography section; here, you can change the text's font color, size, and alignment.
• Here, on the dropdown menu, you can easily select your custom font or embed your font’s CSS & URL under Custom Font.
  

3. Set Live

• Once you’re satisfied with the theme you’ve created, you can save and publish changes.
  

Custom Font Format

When using Custom Font, fill in the two fields like this:

Font CSS:  font-family: 'Lora';
Font URL:  https://fonts.googleapis.com/css2?family=Lora

Font CSS — a single font-family declaration:

font-family: 'YourFontName';

Font URL — a public URL to a .css file (not a direct .woff2 / .otf / .ttf link). The CSS file must contain an @font-face rule that registers the same font name:

@font-face {
  font-family: 'YourFontName';
  src: url('https://your-cdn.com/font.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

The name in Font CSS ('YourFontName') must match the name in the @font-face rule exactly.

Example:

Font CSS: font-family: 'Brandon';

Font URL: https://cdn.example.com/fonts.css

Where fonts.css contains:

@font-face {
  font-family: 'Brandon';
  src: url('https://cdn.example.com/Brandon-Regular.woff2') format('woff2');
}

Note: For the font to load correctly, your CSS and font files must be served with:

• Content-Type: text/csson the.cssfile
• Access-Control-Allow-Origin: *(or your site origin) on both the.cssfile and the font binary

Quick check: Open your Font URL in a new browser tab. If it displays as readable CSS text, you're good. If the browser downloads the file or shows it as plain text, your Content-Type is wrong — contact your CDN manager to fix it.