no-generic-family-in-font-face
Disallow CSS generic family keywords as font-family descriptor values inside @font-face blocks.
Rule catalog ID: R020
Targeted pattern scopeโ
font-familydescriptor inside@font-faceblocks.
What this rule reportsโ
@font-faceblocks wherefont-familyis set to a CSS generic family keyword such asserif,sans-serif,monospace,cursive,fantasy,system-ui,ui-serif,ui-sans-serif,ui-monospace,ui-rounded,emoji,math, orfangsong.
Why this rule existsโ
The CSS Fonts specification requires the font-family descriptor inside @font-face to be a custom author-defined family name. Assigning a CSS generic keyword (such as sans-serif) silently shadows the built-in generic family: any element that tries to fall back to sans-serif will instead receive this custom @font-face definition, which is almost always unintentional. Additionally, the block effectively becomes unresolvable as a named web font because the name collides with the CSS keyword.
This is a common copy-paste mistake and nearly always indicates a forgotten custom name. The browser behaviour is implementation-defined and unreliable across engines.
โ Incorrectโ
/* Generic keyword used as custom font name โ shadows the built-in generic */
@font-face {
font-family: sans-serif;
src: url("./inter.woff2") format("woff2");
}
@font-face {
font-family: serif;
src: url("./my-font.woff2") format("woff2");
}
โ Correctโ
@font-face {
font-family: "Inter";
src: url("./inter.woff2") format("woff2");
}
@font-face {
font-family: "My Custom Font";
src: url("./my-font.woff2") format("woff2");
}
Additional examplesโ
The following CSS-defined generic family keywords trigger this rule:
| Keyword | Category |
|---|---|
serif | Traditional |
sans-serif | Traditional |
monospace | Traditional |
cursive | Traditional |
fantasy | Traditional |
system-ui | System UI |
ui-serif | System UI |
ui-sans-serif | System UI |
ui-monospace | System UI |
ui-rounded | System UI |
emoji | Specialized |
math | Specialized |
fangsong | Specialized |