Skip to main content

prefer-variable-fonts

Encourage variable-font usage when a family is split into multiple static weights.

Rule catalog ID: R017

Targeted pattern scopeโ€‹

  • Groups of @font-face declarations sharing a family name.

What this rule reportsโ€‹

  • Families with three or more static-weight faces and no obvious variable-weight source.

Why this rule existsโ€‹

Variable fonts often reduce request count and simplify long-term font maintenance.

โŒ Incorrectโ€‹

@font-face {
  font-family: "Inter";
  font-weight: 300;
  src: url("./inter-300.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-weight: 400;
  src: url("./inter-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-weight: 700;
  src: url("./inter-700.woff2") format("woff2");
}

โœ… Correctโ€‹

@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  src: url("./inter-variable.woff2") format("woff2");
}

Further readingโ€‹