$type: "fontFamily" primitive

Font Family Token

Font family tokens define which typeface(s) to use. The $value can be a single string for a named font family, or an array of strings representing a prioritized list of font families (fallback stack). This maps directly to the CSS font-family property.

Value Format

A string or array of strings (font name fallbacks)

When to Use

Use font family tokens to establish the typographic palette of your design system. Separate tokens for display, body, and code typefaces let you swap entire fonts globally without hunting through component styles.

Valid Example

Valid JSON .json

{
  "font": {
    "body": {
      "$value": ["Inter", "Helvetica Neue", "sans-serif"],
      "$type": "fontFamily",
      "$description": "Primary body typeface"
    },
    "mono": {
      "$value": "JetBrains Mono",
      "$type": "fontFamily"
    }
  }
}

Paste the example above into the validator to test it yourself.

Open Validator

Related Token Types