Font family
Select a configured font family or provide an arbitrary font-family value.
Choose the typeface stack for an element. Use a named font-family token when the same stack should be reused across a site; use an arbitrary value for a one-off stack.
Quick reference
| Example class | Expected declarations |
|---|---|
font-ui | font-family: var(--zw-font-family-ui); |
font-[Georgia,_serif] | font-family: Georgia, serif; |
Example setup
The shared preview base explicitly selects spec 1, reset none, strict mode, spacingUnit 0.25rem, and no breakpoints. Each token example declares tokens.fontFamilies in its record. No browser theme or Tailwind font token is assumed. wind-demo classes add only spacing, borders, labels, and color; the font utilities supply the typeface.
Examples in use
Compare configured stacks
The example configures ui, reading, and code in tokens.fontFamilies, then applies each named font directly to its text.
<div class="wind-demo-family">
<p><span class="wind-demo-label">Interface</span><span class="font-ui">A clear system sans / 読みやすいサンセリフ</span></p>
<p><span class="wind-demo-label">Reading</span><span class="font-reading">A serif voice / セリフ体の雰囲気</span></p>
<p><span class="wind-demo-label">Code</span><span class="font-code">const value = 42;</span></p>
</div>@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
:root {
--zw-font-family-code: ui-monospace, monospace;
--zw-font-family-reading: Georgia, "Times New Roman", serif;
--zw-font-family-ui: system-ui, sans-serif;
--zw-spacing-unit: .25rem;
}
}
.wind-demo-family {
color: #223247;
border: 1px solid #b7c5d4;
padding: 1rem;
}
.wind-demo-family p {
margin: 0;
padding: .45rem 0;
border-bottom: 1px solid #d8e0e8;
}
.wind-demo-family p:last-child {
border-bottom: 0;
}
.wind-demo-label {
display: inline-block;
width: 5.5rem;
color: #5d6c7c;
font-size: .8rem;
}
.font-code {
font-family: var(--zw-font-family-code);
}
.font-reading {
font-family: var(--zw-font-family-reading);
}
.font-ui {
font-family: var(--zw-font-family-ui);
}Configuration for this example
{
"wind": {
"spec": 1,
"reset": "none",
"strict": true,
"tokens": {
"spacingUnit": "0.25rem",
"fontFamilies": {
"ui": "system-ui, sans-serif",
"reading": "Georgia, 'Times New Roman', serif",
"code": "ui-monospace, monospace"
}
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo-family": true,
"wind-demo-label": true
},
"safelist": {
"docs-preview": [
"font-ui",
"font-reading",
"font-code"
]
}
}
}Authored demonstration CSS
.wind-demo-family { color: #223247; border: 1px solid #b7c5d4; padding: 1rem; }
.wind-demo-family p { margin: 0; padding: 0.45rem 0; border-bottom: 1px solid #d8e0e8; }
.wind-demo-family p:last-child { border-bottom: 0; }
.wind-demo-label { display: inline-block; width: 5.5rem; color: #5d6c7c; font-size: 0.8rem; }Use a one-off stack
font-[Georgia,_serif] resolves to Georgia, serif after underscore decoding. The example repeats the explicit token setup so the preview configuration is self-contained.
<p class="wind-demo-type font-[Georgia,_serif]">A one-off serif stack / 任意のフォント指定</p>@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
:root {
--zw-font-family-code: ui-monospace, monospace;
--zw-font-family-reading: Georgia, "Times New Roman", serif;
--zw-font-family-ui: system-ui, sans-serif;
--zw-spacing-unit: .25rem;
}
}
.wind-demo-type {
color: #223247;
border-left: 3px solid #6d7f96;
padding: .5rem .75rem;
}
.font-\[Georgia\,_serif\] {
font-family: Georgia, serif;
}Configuration for this example
{
"wind": {
"spec": 1,
"reset": "none",
"strict": true,
"tokens": {
"spacingUnit": "0.25rem",
"fontFamilies": {
"ui": "system-ui, sans-serif",
"reading": "Georgia, 'Times New Roman', serif",
"code": "ui-monospace, monospace"
}
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo-type": true
},
"safelist": {
"docs-preview": [
"font-[Georgia,_serif]"
]
}
}
}Authored demonstration CSS
.wind-demo-type { color: #223247; border-left: 3px solid #6d7f96; padding: 0.5rem 0.75rem; }Custom and named values
A class such as font-reading resolves tokens.fontFamilies.reading. Token names used by font-family and font-weight share the font root, so keep their names distinct in one configuration. An arbitrary stack such as font-[Georgia,_serif] replaces the underscore with a space and is validated as font-family CSS. Prefer a configured name for a stack reused in several places; arbitrary values are useful for a local exception. The selected font still needs to be installed or loaded by the application.
Related guides: Utility grammar · Variants
Catalog details
font
| Field | Value |
|---|---|
| Catalog identifier | v1.font.family |
| Class pattern | font-<suffix> |
| Grammar | {"acceptedKinds":["token","arbitrary"],"arbitraryProperty":"font-family","allowsFractionSlash":false,"allowsColorOpacity":false} |
| Accepted values | The catalog has no separate accepted-value records for this entry. |
| Token categories | fontFamilies |
| Negative-value policy | forbidden |
| Conflict group and rank | font-family (15) |
| Order rank | 0 |
| Selector shape | ownElement |
| Spec version | 1 |
| Emitter properties | font-family |
Accepted values
The catalog has no separate accepted-value records for this entry.
Declaration templates
| Property | Value kind | Fixed value |
|---|---|---|
font-family | resolved | null |
Catalog examples
| Example class | Expected declarations |
|---|---|
font-[sans-serif] | font-family: sans-serif |