Skip to content

Correct handling of <family-name> in font-family #120

@yisibl

Description

@yisibl

Input

.foo {
  font-family: 'sans-serif', 'default';
}

Output

.foo {
  font-family: sans-serif, default;
}

image

Expected

.foo {
  font-family: 'sans-serif', 'default';
}

font-family: sans-serif means that a generic sans-serif font family will be used, while font-family: 'sans-serif' (with quotes) refers to an actual font that goes by the name of sans-serif.

CSS Spec

Note: this means that if you really have a font whose name is the same as one of the names, or the common-keywords|CSS-wide keyword values, it must be quoted.

To illustrate this, the following unusual font family names are valid because they are quoted:
font-family: "sans-serif", sans-serif;
font-family: "default", sans-serif;
font-family: "initial", sans-serif;
font-family: "inherit", sans-serif;

The full CSS-wide keyword(common-keywords) and <generic-family> in the current specification include:

CSS-wide keyword

https://www.w3.org/TR/css-values-4/#common-keywords

"initial"
"inherit"
"unset"

<generic-family>

https://www.w3.org/TR/css-fonts-4/#generic-font-families

"serif"
"sans-serif"
"cursive"
"fantasy"
"monospace"
"system-ui"
"emoji"
"math"
"fangsong"
"ui-serif"
"ui-sans-serif"
"ui-monospace"
"ui-rounded"

Here's a lint tool: https://mothereff.in/font-family

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions