Web/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.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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 as ꜩ. 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;
}

Specifications

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

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
font-variant-ligatures	Chrome Full support 34 Full support 34 Full support 31 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 79 Full support 79 Full support 79 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Full support 34 Full support 34 No support 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.	IE No support No	Opera Full support 21 Full support 21 Full support 19 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari Full support 9.1 Full support 9.1 Full support 7 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support 37 Full support 37 Full support 4.4 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 34	Firefox Android Full support 34 Full support 34 No support 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.	Opera Android Full support 21 Full support 21 Full support 19 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari iOS Full support 9.3 Full support 9.3 Full support 7 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 2.0

Legend

Full support  

Full support

No support  

No support

User must explicitly enable this feature.'

User must explicitly enable this feature.

Requires a vendor prefix or different name for use.'

Requires a vendor prefix or different name for use.

font-variant-ligatures by Mozilla Contributors is licensed under CC-BY-SA 2.5.