font-feature-settings
The font-feature-settings
CSS descriptor allows you to define the initial settings to use for the font defined by the @font-face
at-rule. You can further use this descriptor to control typographic font features such as ligatures, small caps, and swashes, for the font defined by @font-face
. The values for this descriptor are the same as the font-feature-settings
property, except for the global keyword values.
Since this descriptor sets feature values on the font object in the @font-face
at-rule and not on an entire element, only some glyphs in an element may be rendered using this descriptor.
Syntax
/* Use the default settings */
font-feature-settings: normal;
/* Set values for OpenType feature tags */
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
Values
This descriptor is specified as either the keyword normal
or as a comma-separated list of <feature-tag-value>
values. When rendering text, the list of OpenType <feature-tag-value>
values are passed to the text layout engine to enable or disable font features.
normal
-
Indicates that text is laid out using default font settings. This is the default value.
<feature-tag-value>
-
Represents a space-separated tuple consisting of a tag name and an optional value.
The tag name is always a
<string>
of four ASCII characters. If the tag name has more or fewer characters or if it contains characters outside theU+20
–U+7E
code point range, the descriptor is invalid.The optional value can be a positive integer or the keyword
on
oroff
. The keywordson
andoff
are synonyms for the values1
and0
, respectively. If no value is set, the default is1
. For non-boolean OpenType features (e.g., stylistic alternates), the value implies a particular glyph to be selected; for boolean features, the value turns the feature on or off.
Formal definition
Related at-rule | @font-face |
---|---|
Initial value | normal |
Computed value | as specified |
Formal syntax
Examples
Enabling swash glyphs using the @font-face at-rule
In this example, the tag name swsh
and a boolean value 1
are used as the value for the font-feature-settings
descriptor in the @font-face
at-rule.
HTML
<p class="swash-off">Swash is off here</p>
<p class="swash-on">Swash is on here</p>
CSS
@font-face {
font-family: MonteCarlo;
src: url("montecarlo-regular.woff2");
}
@font-face {
font-family: MonteCarlo2;
src: url("montecarlo-regular.woff2");
font-feature-settings: "swsh" 1;
}
p {
font-size: 3rem;
margin: 0.7rem 3rem;
}
.swash-off {
font-family: MonteCarlo;
}
.swash-on {
font-family: MonteCarlo2;
}
Result
Line 1 shows the default ornate design of the MonteCarlo font, and line 2 shows the default glyphs being replaced with swash glyphs.
Specifications
Specification |
---|
CSS Fonts Module Level 4 # font-rend-desc |
Browser compatibility
BCD tables only load in the browser
See also
- Other
@font-face
descriptors:font-family
,font-style
,font-variation-settings
,font-weight
,src
- Related font properties:
font-feature-settings
,font-variant-alternates
,font-variation-settings