Typography
Typography defines the fonts used across text elements in the experience, including headings, inputs, buttons, and links.
What you can customize
Global Custom Font
Set a default font applied across the entire interface
Choose from free Google Fonts or upload your own font
Each font family supports two different weights, bold and normal
If uploading your own custom font:
Supported font formats include woff2, woff, eot, svg, otf, and ttf. If possible, using woff2 fonts is optimal. There are free online converters for this such as this one.
Make sure to upload both a regular and a bold version of your font. The bold and the regular font may or may not be a part of the same font family depending on your preferences.
To easily find local fonts you can use Font Book on Macs and Fonts inside control panel on Windows.
After defining a global custom font you can optionally override that font for links, buttons (both buttons in general as well as specific buttons) as well as inputs.
Text Colors
Configure text color for light mode
Configure text color for dark mode
When you define a custom text color, we do a WCAG color contrast check, and you're only able to save the color if contrast is higher than 3:1.
How it works
Global font acts as the fallback across all components
Component-level font settings override the global font
Uploaded fonts become selectable throughout the system
Tips
Stick to 1–2 fonts max for a clean, professional look
Ensure readability across sizes (especially for inputs and buttons)
Avoid overly thin fonts for accessibility reasons
Last updated
Was this helpful?