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
};
font for the default token values
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-interactivesemantic font is used to define the default font for interactive elements. Thefont-family-ctacomponent font inherits from thefont-family-interactivesemantic font via CSS variables.If you want to override the just the default CTA font, you can do so by defining the
font-family-ctatoken in the theme.