CSS font-feature-settings Property

Description

The font-feature-settings property provides low-level control over OpenType font features. It is intended as a way of providing access to font features that are not widely used but are needed for a particular use case.

  • Initial valuenormal
  • Applies toAll elements
  • InheritedYes
  • MediaVisual
  • Computed valueAs specified
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.fontFeatureSettings

Syntax

Formal syntax: normal | <feature-tag-value> # 

font-feature-settings: normal;
font-feature-settings: "dlig" 1;       /* dlig=1 enable discretionary ligatures */
font-feature-settings: "smcp" on;      /* smcp=1 enable small caps */
font-feature-settings: "c2sc";         /* c2sc=1 enable caps to small caps */
font-feature-settings: "liga" off;     /* liga=0 no common ligatures */
font-feature-settings: "tnum" "hist";  /* invalid, need a comma-delimited list */
font-feature-settings: "silly" off;    /* invalid, tag too long */
font-feature-settings: "PKRN";         /* PKRN=1 enable custom feature */
font-feature-settings: dlig;           /* invalid, tag must be a string */

Values

  • normalNo change in glyph selection or positioning occurs due to this property.
  • <feature-tag-value> = <string> [ <integer> | on | off ]?The <string> is a case-sensitive OpenType feature tag. As specified in the OpenType specification, feature tags contain four ASCII characters. An <integer> value must be 0 or greater. A value of 0 indicates that the feature is disabled. For boolean features, a value of 1 enables the feature.

Example

.class {
   font-feature-settings: "smcp", "swsh" 2;
}

Browser Support

?Firefox?Explorer?Chrome?Safari?Opera

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.