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 already use within your product for Chameleon Experiences, without any extra installation or coding. Simply use the exact name of the font when setting your brand within the Styling page, avoiding quotations or semi-colons. 

If the font you are adding is available on Chameleon by default, then you will immediately see a preview of this. If not, don't worry, it may not show correctly in the Dashboard but will appear correctly when you're editing or previewing your Experiences in the Builder.

Check which fonts your product uses

You can double-check the exact name of the fonts used inside your product by inspecting it within the browser console. To do this, right-click and "inspect element" for any button or component in your application that is using the target 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?