Skip to content

[css-fonts][css-prints][css-values][editorial] Add font- prefix to production names #13272

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
svgeesus merged 2 commits into from
Apr 16, 2026
Merged

[css-fonts][css-prints][css-values][editorial] Add font- prefix to production names #13272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
66ed019
[css-fonts][css-prints][css-values][editorial] Add font- prefix to pr…
cdoublev Dec 28, 2025
4abd918
Merge branch 'main' into font-family-name
svgeesus Apr 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
193 changes: 139 additions & 54 deletions css-fonts-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,12 +120,12 @@ Font family: the 'font-family!!property' property</h3>

<pre class="propdef">
Name: font-family
Value: [ <<family-name>> | <<generic-family>> ]#
Value: [ <<font-family-name>> | <<generic-font-family>> ]#
Initial: depends on user agent
Applies to: all elements and text
Inherited: yes
Percentages: n/a
Computed value: list, each item a string and/or <<generic-family>> keywords
Computed value: list, each item a string and/or <<generic-font-family>> keywords
Animation type: discrete
</pre>

Expand Down Expand Up @@ -214,20 +214,20 @@ Font family: the 'font-family!!property' property</h3>
There are three types of font family names, two of which may be used with this property:

<dl>
<dt><dfn id="family-name-value"><<family-name>></dfn>
<dd>
The name of a font family, such as Helvetica or Verdana in the previous example.
<dt><dfn id="font-family-name-value"><<font-family-name>></dfn>
<dd>
The name of a font family, such as Helvetica or Verdana in the previous example.

This might be a locally-instaled font, or might be a web font.

<dt><<generic-family>>
<dd>
Each <<generic-family>> keyword represents
a generic font choice,
and behaves as a potential alias for one or more locally-installed fonts
belonging to the specified generic font category.
A <<generic-family>> can thus be used as a fallback
for when an author's more specific font choices are not available.
<dt><<generic-font-family>>
<dd>
Each <<generic-font-family>> keyword represents
a generic font choice,
and behaves as a potential alias for one or more locally-installed fonts
belonging to the specified generic font category.
A <<generic-font-family>> can thus be used as a fallback
for when an author's more specific font choices are not available.

There are three types of generic family:

Expand All @@ -251,12 +251,12 @@ Font family: the 'font-family!!property' property</h3>
and to use a more specific generic font family, if applicable,
to prefer a specific style even if the individual named font family is not available.

Note that <<generic-family>> keywords cannot be quoted
(otherwise they are interpreted as a <<family-name>>).
Note that <<generic-font-family>> keywords cannot be quoted
(otherwise they are interpreted as a <<font-family-name>>).

The set of generic family keywords is defined in [[#generic-font-families]].

<dt><dfn id="system-family-name-value"><<system-family-name>></dfn>
<dt><dfn id="system-font-family-name-value"><<system-font-family-name>></dfn>
<dd>
A locally installed system font, whose use is subject to certain constraints.
In particular, it may not be used with the ''font-family'' property,
Expand Down Expand Up @@ -286,11 +286,11 @@ Font family: the 'font-family!!property' property</h3>

</dl>

<h4 id="family-name-syntax">
Syntax of <<family-name>>
<h4 id="font-family-name-syntax">
Syntax of <<font-family-name>>
</h4>

<pre class=prod><l><<family-name>></l> = <<string>> | <<custom-ident>>+</pre>
<pre class=prod><l><<font-family-name>></l> = <<string>> | <<custom-ident>>+</pre>

Font family names other than generic families or system font families
must either be given quoted as <<string>>s,
Expand Down Expand Up @@ -320,7 +320,7 @@ Syntax of <<family-name>>

Note: this means that if you really have a font
whose name
is the same as one of the <<generic-family>> names,
is the same as one of the <<generic-font-family>> names,
or the system font names,
or the [=CSS-wide keywords=],
it <em>must</em> be quoted.
Expand All @@ -338,7 +338,7 @@ Syntax of <<family-name>>
</pre>
</div>

If a sequence of identifiers is given as a <<family-name>>,
If a sequence of identifiers is given as a <<font-family-name>>,
the computed value is the name
converted to a string
by joining all the identifiers in the sequence by single spaces.
Expand All @@ -361,28 +361,28 @@ Syntax of <<family-name>>
Font family <em>names</em> that happen to be the same as
a 'font-family!!property' keyword value
(e.g. <a>CSS-wide keywords</a> such as ''inherit'', or
<<generic-family>> keywords such as ''serif'')
<<generic-font-family>> keywords such as ''serif'')
must be quoted to prevent confusion
with the keywords of the same names.
UAs must not consider these keywords as matching the <<family-name>> type.
UAs must not consider these keywords as matching the <<font-family-name>> type.

<h4 id="generic-family-name-syntax">
Syntax of <<generic-family>>
Syntax of <<generic-font-family>>
</h4>

<!-- <pre class=prod>
<dfn><<generic-family>></dfn> = generic(<<generic-script-specific>>) | <<generic-complete>> | <<generic-incomplete>>
<dfn><<generic-script-specific>></dfn> = <a href="">kai</a> | fangsong | nastaliq
<dfn><<generic-complete>></dfn> = serif | sans-serif | system-ui | cursive | fantasy | math | monospace
<dfn><<generic-incomplete>></dfn> = ui-serif | ui-sans-serif | ui-monospace | ui-rounded
</pre> -->

<pre class=prod>
<dfn><<generic-family>></dfn> = <<generic-script-specific>>| <<generic-complete>> | <<generic-incomplete>>
<dfn><<generic-script-specific>></dfn> = <l>''font-family/generic(fangsong)''</l> | <l>''font-family/generic(kai)''</l> | <l>''font-family/generic(khmer-mul)''</l> | <l>''font-family/generic(nastaliq)''</l>
<dfn><<generic-complete>></dfn> = <l>''font-family/serif''</l> | <l>''font-family/sans-serif''</l> | <l>''font-family/system-ui''</l> | <l>''font-family/cursive''</l> | <l>''font-family/fantasy''</l> | <l>''font-family/math''</l> | <l>''font-family/monospace''</l>
<dfn><<generic-incomplete>></dfn> = <l>''font-family/ui-serif''</l> | <l>''font-family/ui-sans-serif''</l> | <l>''font-family/ui-monospace''</l> | <l>''font-family/ui-rounded''</l>
</pre>
<dfn><<generic-font-family>></dfn> = generic(<<generic-font-script-specific>>) | <<generic-font-complete>> | <<generic-font-incomplete>>
<dfn><<generic-font-script-specific>></dfn> = <a href="">kai</a> | fangsong | nastaliq
<dfn><<generic-font-complete>></dfn> = serif | sans-serif | system-ui | cursive | fantasy | math | monospace
<dfn><<generic-font-incomplete>></dfn> = ui-serif | ui-sans-serif | ui-monospace | ui-rounded
</pre> -->

<pre class=prod>
<dfn><<generic-font-family>></dfn> = <<generic-font-script-specific>>| <<generic-font-complete>> | <<generic-font-incomplete>>
<dfn><<generic-font-script-specific>></dfn> = <l>''generic(fangsong)''</l> | <l>''generic(kai)''</l> | <l>''generic(khmer-mul)''</l> | <l>''generic(nastaliq)''</l>
<dfn><<generic-font-complete>></dfn> = <l>''serif''</l> | <l>''sans-serif''</l> | <l>''system-ui''</l> | <l>''cursive''</l> | <l>''fantasy''</l> | <l>''math''</l> | <l>''monospace''</l>
<dfn><<generic-font-incomplete>></dfn> = <l>''ui-serif''</l> | <l>''ui-sans-serif''</l> | <l>''ui-monospace''</l> | <l>''ui-rounded''</l>
</pre>

To make the syntax less succeptible to clashes, more recently defined generic font families are identified using a functional syntax.

Expand All @@ -400,11 +400,11 @@ Syntax of <<generic-family>>
</div>

<h4 id="system">
Syntax of <<system-family-name>>
Syntax of <<system-font-family-name>>
</h4>

<pre class="prod">
<l><<system-family-name>></l> = <l>''caption''</l> | <l>''icon''</l> | <l>''menu''</l> | <l>''message-box''</l> | <l>''small-caption''</l> | <l>''status-bar''</l>
<l><<system-font-family-name>></l> = <l>''caption''</l> | <l>''icon''</l> | <l>''menu''</l> | <l>''message-box''</l> | <l>''small-caption''</l> | <l>''status-bar''</l>
</pre>

<h4 id="font-families">
Expand Down Expand Up @@ -464,23 +464,23 @@ Generic font families</h4>
generic-family-keywords-002.html
</wpt>

Note: Generic font families are intended to be widely implemented on many platforms, unlike arbitrary <<family-name>>s which are usually platform-specific names. They are expected to map to different fonts on different platforms. Authors may specify these generic family names if they desire their text to follow a particular design on many platforms, and are not particular about which specific font is chosen on those platforms.
Note: Generic font families are intended to be widely implemented on many platforms, unlike arbitrary <<font-family-name>>s which are usually platform-specific names. They are expected to map to different fonts on different platforms. Authors may specify these generic family names if they desire their text to follow a particular design on many platforms, and are not particular about which specific font is chosen on those platforms.

User agents should provide reasonable default choices for the generic font families,
that express the characteristics of each family as well as possible,
within the limits allowed by the underlying technology.
User agents are encouraged to allow users to select alternative faces for the generic font families.

<dl dfn-for="font-family,<generic-family>" dfn-type=value>
<dt id="serif-def"><dfn>serif</dfn>
<dd>
Serif fonts represent
glyphs that have finishing strokes,
flared or tapering ends,
or have actual serifed endings (including slab serifs).
Serif fonts are typically proportionately-spaced.
They often display a greater variation between thick and thin strokes
than fonts from the ''sans-serif'' generic font family.
<dl dfn-for="font-family,<generic-font-family>" dfn-type=value>
<dt id="serif-def"><dfn>serif</dfn>
<dd>
Serif fonts represent
glyphs that have finishing strokes,
flared or tapering ends,
or have actual serifed endings (including slab serifs).
Serif fonts are typically proportionately-spaced.
They often display a greater variation between thick and thin strokes
than fonts from the ''sans-serif'' generic font family.

Note: ''serif'' and ''sans-serif''
only apply to a small handful of writing scripts.
Expand Down Expand Up @@ -1785,7 +1785,7 @@ Shorthand font property: the 'font' property</h3>
<<'font-weight'>> ||
<<font-width-css3>> ]? <<'font-size'>> [ / <<'line-height'>> ]?
<<'font-family'>># ] |
<<system-family-name>>
<<system-font-family-name>>
Initial: see individual properties
Applies to: all elements and text
Inherited: yes
Expand Down Expand Up @@ -2695,7 +2695,7 @@ The <dfn id="at-font-face-rule">''@font-face''</dfn> rule</h3>

<pre class='descdef'>
Name: font-family
Value: <<family-name>>
Value: <<font-family-name>>
For: @font-face
Initial: N/A
</pre>
Expand Down Expand Up @@ -2757,6 +2757,13 @@ The <dfn id="at-font-face-rule">''@font-face''</dfn> rule</h3>

<h4 id="font-face-src-parsing">Parsing the 'src!!descriptor' descriptor</h4>

To parse a <dfn><<font-src-list>></dfn> production, [=parse a list=] of <<font-src>>s.

<pre class="prod"><dfn>&lt;font-src></dfn> = <<url>> [ format(<<font-format>>)]? [ tech( <<font-tech>>#)]? | local(<<font-family-name>>)</pre>

<pre class="prod"><dfn id="font-format-values">&lt;font-format&gt;</dfn>
= [<<string>> | collection | embedded-opentype | opentype
| svg | truetype | woff | woff2 ]</pre>
To parse a <dfn><<font-src-list>></dfn> production, [=parse a list=] of <<font-src>>s.

<pre class="prod">
Expand Down Expand Up @@ -2949,7 +2956,7 @@ The <dfn id="at-font-face-rule">''@font-face''</dfn> rule</h3>
a locally available copy of a given font
and download it if it's not,
<code>local()</code> can be used.
The locally-installed <<family-name>> argument to <code>local()</code>
The locally-installed <<font-family-name>> argument to <code>local()</code>
is a format-specific string
that uniquely identifies a single font face
within a larger family.
Expand All @@ -2964,7 +2971,7 @@ The <dfn id="at-font-face-rule">''@font-face''</dfn> rule</h3>
separated by a single space;
and thus,
<a>CSS-wide keywords</a> such as ''inherit'', and
<<generic-family>> keywords such as ''serif''
<<generic-font-family>> keywords such as ''serif''
are not allowed inside <code>local()</code>.

<pre class="lang-css">
Expand Down Expand Up @@ -6047,6 +6054,32 @@ Defining font specific alternates: the <dfn>@font-feature-values</dfn> rule</h3>

<h4 id="font-feature-values-syntax">Basic syntax</h4>

An ''@font-feature-values'' rule's prelude
contains a list of font family names,
followed by a block containing multiple ''feature-value-block''s,
a special type of subsidiary at-rule.
Each ''feature-value-block''' contains declarations
mapping author-chosen human-friendly names
(such as "flowing")
to feature indexes for the associated feature.

Each <<font-feature-value>> has the same meaning
as the corresponding value of the 'font-variant-alternates' property.

<pre class=prod export>
@font-feature-values = @font-feature-values <<font-family-name>># { <<declaration-rule-list>> }

<dfn for="@font-feature-values">font-feature-value-type</dfn> = <<@stylistic>> | <<@historical-forms>> | <<@styleset>> | <<@character-variant>>
| <<@swash>> | <<@ornaments>> | <<@annotation>>

<dfn for="@font-feature-values">@stylistic</dfn> = @stylistic { <<declaration-list>> }
<dfn for="@font-feature-values">@historical-forms</dfn> = @historical-forms { <<declaration-list>> }
<dfn for="@font-feature-values">@styleset</dfn> = @styleset { <<declaration-list>> }
<dfn for="@font-feature-values">@character-variant</dfn> = @character-variant { <<declaration-list>> }
<dfn for="@font-feature-values">@swash</dfn> = @swash { <<declaration-list>> }
<dfn for="@font-feature-values">@ornaments</dfn> = @ornaments { <<declaration-list>> }
<dfn for="@font-feature-values">@annotation</dfn> = @annotation { <<declaration-list>> }
</pre>
An ''@font-feature-values'' rule's prelude
contains a list of font family names,
followed by a block containing multiple <dfn export lt="font feature value block | feature value block">feature value blocks</dfn>,
Expand Down Expand Up @@ -6079,6 +6112,58 @@ Defining font specific alternates: the <dfn>@font-feature-values</dfn> rule</h3>
test_font_feature_values_parsing.html
</wpt>

The ''@font-feature-values'' prelude
is a comma-delimited list of font family names that match the definition of <<font-family-name>>
for the 'font-family!!property' property.
This means that only named font families are allowed;
rules that include generic or system fonts in the list of font families are syntax errors.
However, if a user agent defines a generic font to be a specific named font (e.g. Helvetica),
the settings associated with that family name will be used.
If syntax errors occur within the <<font-family-name>> list,
the entire rule ''@font-feature-values'' rule is invalid
and must be ignored.

The ''@font-feature-values'' block accepts <<declaration-rule-list>> as its contents;
these list items are either:

- [=at-rules=] named by one of the <<font-feature-value-type>> at-keyword tokens

or

- the '@font-feature-values/font-display' descriptor.

<!-- TODO: tab says "The OM needs to make sure it exposes both .style and .childRules or whatever." -->

Specifying the same <<font-feature-value-type>> more than once is valid;
their contents are cascaded together.
Each <<feature-value-block>> accepts a list of [=declarations=],
the <dfn lt="font feature value declaration">font feature value declarations</dfn>,
where the declaration's name can be any [=identifier=],
and the value must be a list of one or more non-negative <<integer>>s.

The <<feature-value-block>>s accept any declaration name;
these names must be identifiers,
per standard CSS syntax rules,
and are [=case-sensitive=]
(so ''foo: 1;'' and ''FOO: 2'' define two different features).
Each declaration's value must match the grammar ''<<integer [0,∞]>>+'',
or else the declaration is invalid and must be ignored.

Note: Each feature name is unique only within a single <<feature-value-block>>.
Between different <<feature-value-block>>s,
or the same type of <<feature-value-block>>s in separate ''@font-feature-values'' rules,
names can be reused without colliding.

For each <<font-family-name>> in the ''@font-feature-values'' prelude,
each [=font feature value declaration=] defines a mapping between a
(family name, feature block name, declaration name) [=tuple=]
and the list of one or more integers from the declaration's value.
If the same tuple appears more than once in a document
(such as if a single block),
the last-defined one is used.

<div class=example id="ex-same-font-feature-values">
For example, the following all define the exact same set of font feature values:
The ''@font-feature-values'' prelude
is a comma-delimited list of font family names that match the definition of <<family-name>>
for the 'font-family!!property' property.
Expand Down Expand Up @@ -7881,7 +7966,7 @@ Font family: the '@font-palette-values/font-family' descriptor</h4>

<pre class='descdef'>
Name: font-family
Value: <<family-name>>#
Value: <<font-family-name>>#
For: @font-palette-values
Initial: N/A
</pre>
Expand Down
4 changes: 2 additions & 2 deletions css-fonts-5/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ in CSS Fonts Level 4, the following new generic font families are also defined.

Issue(4910):

<dl dfn-for="font-family,<generic-family>" dfn-type=value>
<dl dfn-for="font-family,<generic-font-family>" dfn-type=value>
<dt id="xxx-def"><dfn>xxx</dfn>
<dd>
Placeholder text for the xxx generic font family.
Expand Down Expand Up @@ -509,7 +509,7 @@ according to section [[css-syntax#parse-comma-separated-list-of-component-values
Then each component value is parsed according to this grammar:


<pre><<url>> [ format(<<font-format>>)]? [ tech( <<font-tech>>#)]? | local(<<family-name>>)</pre>
<pre><<url>> [ format(<<font-format>>)]? [ tech( <<font-tech>>#)]? | local(<<font-family-name>>)</pre>

<pre class="prod"><dfn id="font-format-values">&lt;font-format&gt;</dfn>
= [<<string>> | collection | embedded-opentype | opentype
Expand Down
4 changes: 2 additions & 2 deletions css-print/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -574,8 +574,8 @@ small-caption | status-bar | inherit</td>
<td>'font-family'</td>
<td><em title="MUST In The RFC 2119 Context" class="RFC2119">MUST</em><a href="#table_note_1">*</a></td>
<td><em title="MUST In The RFC 2119 Context" class="RFC2119">MUST</em><a href="#table_note_1">*</a></td>
<td>[[ &lt;family-name&gt; | &lt;generic-family&gt; ],]* [
&lt;family-name&gt; | &lt;generic-family&gt; ] | inherit</td>
<td>[[ &lt;font-family-name&gt; | &lt;generic-font-family&gt; ],]* [
&lt;font-family-name&gt; | &lt;generic-font-family&gt; ] | inherit</td>
<td>depends on user agent</td></tr>
<tr class="yes">
<td>'font-size'</td>
Expand Down
2 changes: 1 addition & 1 deletion css-values-3/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,7 +418,7 @@ Property Value Examples</h3>
<td>''overline underline''
<tr>
<td><a property>font-family</a>
<td>[ &lt;family-name> | &lt;generic-family> ]#
<td>[ &lt;font-family-name> | &lt;generic-font-family> ]#
<td>''"Gill Sans", Futura, sans-serif''
<tr>
<td>'border-width'
Expand Down
2 changes: 1 addition & 1 deletion css-values-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -490,7 +490,7 @@ Property Value Examples</h3>
<td>''overline underline''
<tr>
<td><a property>font-family</a>
<td>[ &lt;family-name> | &lt;generic-family> ]#
<td>[ &lt;font-family-name> | &lt;generic-font-family> ]#
<td>''"Gill Sans", Futura, sans-serif''
<tr>
<td>'border-width'
Expand Down
Loading
Loading