W3cubDocs

/CSS

font-variant-ligatures

The font-variant-ligatures CSS property controls which ligatures and contextual forms are used in textual content of the elements it applies to. This leads to more harmonized forms in the resulting text.

Syntax

/* Keyword values */
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures;           /* <common-lig-values> */
font-variant-ligatures: no-common-ligatures;        /* <common-lig-values> */
font-variant-ligatures: discretionary-ligatures;    /* <discretionary-lig-values> */
font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
font-variant-ligatures: historical-ligatures;       /* <historical-lig-values> */
font-variant-ligatures: no-historical-ligatures;    /* <historical-lig-values> */
font-variant-ligatures: contextual;                 /* <contextual-alt-values> */
font-variant-ligatures: no-contextual;              /* <contextual-alt-values> */

/* Global values */
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: unset;

The font-variant-ligatures property is specified as one of the keyword values listed below.

Values

normal
This keyword leads to the activation of the usual ligatures and contextual forms needed for correct rendering. The ligatures and forms activated depend on the font, language and kind of script. This is the default value.
none
This keyword specifies that all ligatures and contextual forms are disabled, even common ones.
<common-lig-values>
These values control the most common ligatures, like for fi, ffi, th or similar. They correspond to the OpenType values liga and clig. Two values are possible:
  • common-ligatures activating these ligatures. Note that the keyword normal activates these ligatures.
  • no-common-ligatures deactivating these ligatures.
<discretionary-lig-values>
These values control specific ligatures, specific to the font and defined by the type designer. They correspond to the OpenType values dlig. Two values are possible:
  • discretionary-ligatures activating these ligatures.
  • no-discretionary-ligatures deactivating the ligatures. Note that the keyword normal usually deactivates these ligatures.
<historical-lig-values>
These values control the ligatures used historically, in old books, like the German tz digraph being displayed ß. They correspond to the OpenType values hlig. Two values are possible:
  • historical-ligatures activating these ligatures.
  • no-historical-ligatures deactivating the ligatures. Note that the keyword normal usually deactivates these ligatures.
<contextual-alt-values>
These values control whether letters adapt to their context—that is, whether they adapt to the surrounding letters. These values correspond to the OpenType values calt. Two values are possible:
  • contextual specifies that the contextual alternates are to be used. Note that the keyword normal usually activates these ligatures too.
  • no-contextual prevents their use.

Formal definition

Initial value normal
Applies to all elements. It also applies to ::first-letter and ::first-line.
Inherited yes
Computed value as specified
Animation type discrete

Formal syntax

normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]

where
<common-lig-values> = [ common-ligatures | no-common-ligatures ]
<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]
<historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]
<contextual-alt-values> = [ contextual | no-contextual ]

Examples

Setting font ligatures and contextual forms

HTML

<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<p class="normal">
  normal<br>
  if fi ff tf ft jf fj
</p>
<p class="none">
  none<br>
  if fi ff tf ft jf fj
</p>
<p class="common-ligatures">
  common-ligatures<br>
  if fi ff tf ft jf fj
</p>
<p class="no-common-ligatures">
  no-common-ligatures<br>
  if fi ff tf ft jf fj
</p>
<p class="discretionary-ligatures">
  discretionary-ligatures<br>
  if fi ff tf ft jf fj
</p>
<p class="no-discretionary-ligatures">
  no-discretionary-ligatures<br>
  if fi ff tf ft jf fj
</p>
<p class="historical-ligatures">
  historical-ligatures<br>
  if fi ff tf ft jf fj
</p>
<p class="no-historical-ligatures">
  no-historical-ligatures<br>
  if fi ff tf ft jf fj
</p>
<p class="contextual">
  contextual<br>
  if fi ff tf ft jf fj
</p>
<p class="no-contextual">
  no-contextual<br>
  if fi ff tf ft jf fj
</p>
<p class="contextual">
  contextual<br>
  if fi ff tf ft jf fj
</p>

CSS

p {
  font-family: Lora, serif;
}
.normal {
  font-variant-ligatures: normal;
}

.none {
  font-variant-ligatures: none;
}

.common-ligatures {
  font-variant-ligatures: common-ligatures;
}

.no-common-ligatures {
  font-variant-ligatures: no-common-ligatures;
}

.discretionary-ligatures {
  font-variant-ligatures: discretionary-ligatures;
}

.no-discretionary-ligatures {
  font-variant-ligatures: no-discretionary-ligatures;
}

.historical-ligatures {
  font-variant-ligatures: historical-ligatures;
}

.no-historical-ligatures {
  font-variant-ligatures: no-historical-ligatures;
}

.contextual {
  font-variant-ligatures: contextual;
}

.no-contextual {
  font-variant-ligatures: no-contextual;
}

.contextual {
  font-variant-ligatures: contextual;
}

Result

Specifications

Specification Status Comment
CSS Fonts Module Level 3
The definition of 'font-variant-ligatures' in that specification.
Candidate Recommendation Initial definition

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
font-variant-ligatures 34
34
31
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
79
79
79
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
34
34
24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No 21
21
19
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
9.1
9.1
7
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
font-variant-ligatures 37
37
4.4
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
34 34
34
24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
21
21
19
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
9.3
9.3
7
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
2.0

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures