Design Token
Fonts
Customizing fonts for your design system.
Default
| Token | Value |
|---|---|
sans | [
"ui-sans-serif",
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"Helvetica Neue",
"Arial",
"Noto Sans",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji"
] |
serif | [
"ui-serif",
"Georgia",
"Cambria",
"Times New Roman",
"Times",
"serif"
] |
mono | [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"Monaco",
"Consolas",
"Liberation Mono",
"Courier New",
"monospace"
] |
sansHeavy boxes perform quick waltzes and jigs.
serifHeavy boxes perform quick waltzes and jigs.
monoHeavy boxes perform quick waltzes and jigs.
By default, Master provides three font family variables, sans, serif, and mono, to facilitate your use as fallbacks when adding custom fonts.
Basic usage
Apply a font
Apply the defined font-family variables using the inherited rules font, font-family.
<body class="font:$(font-family-sans)">…</body><body class="font:font-family-sans">…</body><body class="font:sans">…</body>Font faces
Google Fonts
The fastest way to declare custom font faces is through Google Fonts.
<!DOCTYPE html><html lang="en"><head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"></head></html>Self-hosted fonts
You can also self-host the fonts via native CSS, as usual.
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Inter-Regular.woff2") format("woff2");}