Chameleon is great at blending in and making your product guidance look native. This means everything can 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.
Availability & Usage
📍 For on-brand Tours, Tooltips, Microsurveys, Launchers
⚙️ Set from the Dashboard
When you get started with Chameleon, you'll be able to set your Default Style, including your fonts. Chameleon pulls the fonts identified on your page, and you can always adjust them further.
Simply use the exact name of the font, avoiding quotations or semi-colons. Font name spelling and letter casing are very important and will cause your font not to display if this does not exactly match.
ℹ Fonts are hosted by your application directly, please ensure that the fonts are available from your application on the page where experiences intend to use them.
To adjust your fonts, head over to the Styling page to fine-tune how they appear in Chameleon.
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.
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 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:
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.
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.
Secondary alternative - A font that is similar to your preferred font, but perhaps more common.
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).
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.