Skip to main content

no-invalid-font-weight

Disallow invalid font-weight descriptor values in @font-face blocks.

Rule catalog ID: R032

Targeted pattern scopeโ€‹

  • The font-weight descriptor inside every @font-face block.

What this rule reportsโ€‹

  • @font-face blocks where the font-weight descriptor value is syntactically invalid or outside the valid range.

Why this rule existsโ€‹

The CSS Fonts specification defines strict rules for valid font-weight values in @font-face blocks:

  • Integer range: 1 to 1000 (inclusive). Common values are 400 (normal) and 700 (bold), but any integer in this range is valid.
  • Keywords: normal (equivalent to 400) and bold (equivalent to 700).
  • Range (for variable fonts): Two space-separated values "MIN MAX" where both are in the 1โ€“1000 range and MIN โ‰ค MAX. This declares a variable font that interpolates between those weights.

Invalid values like "900 1100" (exceeds 1000), "bolder" or "lighter" (relative weight keywords, only valid as property values), or "400px" (has units) cause browsers to reject the entire @font-face block or apply unpredictable fallback behaviour. These errors are usually the result of copy-paste from font-weight property values (used in selectors) or misunderstanding the descriptor syntax.

โŒ Incorrectโ€‹

/* Out of range: 1100 exceeds the max of 1000 */
@font-face {
  font-family: "Inter";
  font-weight: 900 1100;
  src: url("./inter-variable.woff2") format("woff2-variations");
}
/* Invalid keyword: "bolder" is a relative property value, not a valid descriptor value */
@font-face {
  font-family: "Inter";
  font-weight: bolder;
  src: url("./inter.woff2") format("woff2");
}
/* Has units: descriptors take unitless numbers */
@font-face {
  font-family: "Inter";
  font-weight: 400px;
  src: url("./inter.woff2") format("woff2");
}

โœ… Correctโ€‹

/* Single weight value */
@font-face {
  font-family: "Inter";
  font-weight: 400;
  src: url("./inter.woff2") format("woff2");
}
/* Keyword "normal" (equivalent to 400) */
@font-face {
  font-family: "Inter";
  font-weight: normal;
  src: url("./inter.woff2") format("woff2");
}
/* Keyword "bold" (equivalent to 700) */
@font-face {
  font-family: "Inter Bold";
  font-weight: bold;
  src: url("./inter-bold.woff2") format("woff2");
}
/* Valid range for variable fonts */
@font-face {
  font-family: "Inter Variable";
  font-weight: 100 900;
  src: url("./inter-variable.woff2") format("woff2-variations");
}

Stylelint config exampleโ€‹

{ "font/no-invalid-font-weight": true }

Further readingโ€‹