no-unquoted-font-family-in-font-face
Require the font-family descriptor value inside @font-face to be quoted.
Rule catalog ID: R027 ๐ง Fixable โ this rule can auto-apply the recommended fix.
Targeted pattern scopeโ
- The
font-familydescriptor inside every@font-faceblock.
What this rule reportsโ
@font-faceblocks where thefont-familydescriptor value is not wrapped in single quotes (') or double quotes (").
Why this rule existsโ
Although CSS technically allows unquoted identifiers as a font-family
descriptor value (for example font-family: Inter), this practice is fragile
for three reasons:
-
CSS keyword shadowing. An unquoted identifier that collides with a CSS generic family keyword (
serif,sans-serif,monospace,cursive,fantasy,system-ui,math,emoji,fangsong) or a system font alias (caption,icon,menu,message-box,small-caption,status-bar) is invalid by definition โ browsers will ignore or misinterpret the block. -
Future-generic risk. CSS Fonts Level 4 and beyond continue to add new reserved generic family names. An unquoted name safe today may become invalid in a future browser version.
-
Selector inconsistency. Quoted and unquoted family names must match exactly in
font-familyselectors โ mixing styles leads to subtle failures that are hard to debug.
Quoting the value unconditionally is the safest, most portable authoring practice.
โ Incorrectโ
/* Unquoted โ fragile and potentially ambiguous */
@font-face {
font-family: Inter;
src: url("./inter.woff2") format("woff2");
}
โ Correctโ
/* Quoted โ unambiguous, safe against keyword conflicts */
@font-face {
font-family: "Inter";
src: url("./inter.woff2") format("woff2");
}
Behavior and migration notesโ
When --fix is supplied, this rule wraps the unquoted value in double quotes:
/* Before */
@font-face { font-family: MyFont; }
/* After */
@font-face { font-family: "MyFont"; }
Stylelint config exampleโ
{ "font/no-unquoted-font-family-in-font-face": true }