Skip to main content

require-font-display

Require font-display in every @font-face block.

Rule catalog ID: R001

Targeted pattern scopeโ€‹

  • @font-face at-rules in CSS and SCSS files.

What this rule reportsโ€‹

  • Any @font-face block that omits font-display.

Why this rule existsโ€‹

Missing font-display can cause FOIT and inconsistent text paint behavior.

โŒ Incorrectโ€‹

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

โœ… Correctโ€‹

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

Further readingโ€‹