Skip to content

design-token/font-family

Summary

Ensures font-family declarations use values from your fonts tokens.

Configuration

Enable the rule in designlint.config.*. See configuration for defining tokens.

json
{
  "tokens": {
    "$version": "1.0.0",
    "fonts": {
      "sans": {
        "$type": "fontFamily",
        "$value": ["Inter", "Arial", "sans-serif"]
      },
      "alt": { "$type": "fontFamily", "$ref": "#/fonts/sans" }
    }
  },
  "rules": { "design-token/font-family": "error" }
}

Options

No additional options.

This rule is not auto-fixable.

Examples

Invalid

css
.title { font-family: 'Arial'; }

Valid

css
.title { font-family: "Inter, sans-serif"; }

When Not To Use

If arbitrary font families are allowed, disable this rule.

See also

Released under the MIT License.