Skip to main content
type FontTokens = SemanticFonts & ComponentFonts;
Defines all the fonts in the theme. To fully change the theme, you only need to define the SemanticFonts, and the rest of the values will inherit from them. For more granular control, individual ComponentFonts can be overridden. For example, the font-family-interactive semantic font is used to define the default font for interactive elements. The font-family-cta component font inherits from the font-family-interactive semantic font via CSS variables. If you want to override the just the default CTA font, you can do so by defining the font-family-cta token in the theme.

​
Example

const fontTokens: Partial<FontTokens> = {
  "font-family-mono": "'Source Code Pro', monospace",   // Change the default monospace font
  "font-family-cta": "var(--cdp-web-font-family-mono)", // Make buttons use the default monospace font
};

​
See

font for the default token values
⌘I