hardcoded-font

A font stack written out instead of a theme token.

Group

Text

Runs

Optional: run it with ur lint --rule hardcoded-font

Level

warning

Reads

Every file

Fix

None: which token a font stack stands for is the author's to say

Why

The line sets font-family or fontFamily to a literal font stack. A font written where it is used drifts from the theme. Define fonts once and refer to a token or a CSS variable; a single bare name, a var(...), and the CSS-wide keywords are not reported. The rule reads style sheets, HTML, and component source as Straitjacket's inline-font rule reads them, and runs where [lint.hardcoded-font] turns it on.

The fix, as Ur suggests it: define the font once and refer to a token or a CSS variable.

For agents

Write no literal font stacks; define fonts once and refer to a token or a CSS variable.

.product-title {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--text-lg);
}

.product-price {
  font-family: var(--font-mono);
}

$ ur lint --rule hardcoded-font
warning[hardcoded-font]: font stack `"Inter", "Helvetica Neue", Arial, sans-serif`
  --> ./src/styles/product.css:2:3 `"Inter", "Helvetica Neue", Arial, sans-serif`
  = hint: define the font once and refer to a token or a CSS variable
0 clone classes and 1 text finding in 1 file