Customizing Fonts
Customizing fonts for your design system.
Default
sansHeavy boxes perform quick waltzes and jigs.
serifHeavy boxes perform quick waltzes and jigs.
monoHeavy boxes perform quick waltzes and jigs.
By default, Master CSS provides three font family variables, sans, serif, and mono, to facilitate your use as fallbacks when adding custom fonts.
| Variable | 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"
] |
Basic usage
Add fonts
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. For example, presetting the global fonts in <body>:
<body class="font:sans font:mono_:where(code,pre) font-feature:'salt'">…</body>Don't forget to add the font faces.
Use cases
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");}