Our goal at Chameleon is to help you make your product guidance look native. This means it should be consistent with your brand and style guidelines. 

You can use the same fonts that you use within your app for product tours, without any extra installation or coding. Simply use the exact name of the font in the font section within the Styling section - when doing so, avoid quotations or semi-colons. 

You can set the font name when setting up your brand or from the Styling section

If the font you are adding is available on the page, then you will immediately see a preview of this. If you don't then most likely you are not adding the precise name of the font. 

To check this, inspect an element that contains this font and check the name:

Font Stacks

Font stacks allow you to add fallback fonts if your preferred font does not render due to browser, device, or other limitations. You can add font stacks by using a comma-separated list of fonts.

The best practice is to include 4 to 6 fonts in this font stack, often ordered in this way:

  1. Preferred font - the font you consider most ideal for the content you’re designing. if the browser can access this font, it will appear exactly as you planned.

  2. OS alternative - it may be the case that your first-choice font isn’t available on Windows or Macintosh. Use the second font stack to pick something that is available on the other OS. You will usually look for one that looks similar to your preferred font.

  3. Secondary alternative - A font that is similar to your preferred font, but perhaps more common.

  4. Common - For this font choice, refer to common Windows or common Mac fonts. Try to pick a common font that’s the same style as your preferred font (e.g. serif, sans-serif).

  5. Generic font name - generic CSS font names include: cursive, fantasy, monospace, sans-serif, serif

👉 You can find a list of common CSS font stacks here.

What's next?

Did this answer your question?