We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

font-variation-settings

The font-variation-settings CSS descriptor allows authors to specify low-level OpenType or TrueType font variations in the @font-face rule.

Related at-rule@font-face
Initial valuenormal
Mediaall
Computed valueas specified
Canonical orderorder of appearance in the formal grammar of the values

Syntax

/* Use the default settings */
font-variation-settings: normal;

/* Set values for OpenType axis names */
font-variation-settings: "xhgt" 0.7;

Values

normal
Text is laid out using default settings.
<string> <number>
When rendering text, the list of OpenType axis names is passed to the text layout engine to enable or disable font features. Each setting is always a <string> of 4 ASCII characters, followed by a <number> indicating the axis value. If the <string> has more or fewer characters or contains characters outside the U+20 - U+7E codepoint range, the whole property is invalid. The <number> can be fractional or negative.

Formal syntax

normal | [ <string> <number>] #

Examples

@font-face {
  font-family: 'OpenTypeFont';
  src: url('open_type_font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-variation-settings: 'wght' 400, 'wdth' 300; 
}

Specifications

Specification Status Comment
CSS Fonts Module Level 4
The definition of 'font-variation-settings' in that specification.
Working Draft Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes No601 No Yes No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes No601 Yes No Yes

1. From version 60: this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Document Tags and Contributors

Contributors to this page: chrisdavidmills
Last updated by: chrisdavidmills,