Design Variables
Fonts
Customizing fonts for your design system.
Overview
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.
View the default variables
{ "mono": [ "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace" ], "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" ]}Basic usage
Add a font
Customize your font tokens by defining variables. For example, add Inter as the general font and Fira Code as the code font.
import { variables } from '@master/css' export default { variables: { 'font-family': { sans: ['Inter', ...variables['font-family'].sans], mono: ['Fira Code', ...variables['font-family'].mono] } }}Apply the defined font-family variables using the inherited rules font, font-family. For example, presetting the global fonts in <body>:
<body class="font:sans font:mono_:where(code,pre) font-feature:'salt'">…</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");}