CSS font-variant-ligatures Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The font-variant-ligatures CSS property is used to control the rendering of ligatures in text. Ligatures are special character combinations that are designed to improve the appearance of certain letter pairs in certain typefaces. This property allows you to enable or disable ligatures in fonts that support them. By setting this property to values like normal, none, or common-ligatures, web developers can fine-tune the typographic presentation of text, ensuring that ligatures are used appropriately to enhance readability and aesthetics or disabled when they are not desired for specific design purposes.

Initial value
normal
Applies to
All elements
Inherited
Yes
Computed value
As specified
Animatable
No
JavaScript syntax
object.style.fontVariantLigatures

Interactive Demo

Difficult waffles

Syntax

font-variant-ligatures: normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]

Values

  • normalA value of 'normal' specifies that common default features are enabled. For OpenType fonts, common ligatures and contextual forms are on by default, discretionary and historical ligatures are not.
  • noneSpecifies that all types of ligatures and contextual forms covered by this property are explicitly disabled. In situations where ligatures are not considered necessary, this may improve the speed of text rendering.
  • <common-lig-values> = [ common-ligatures | no-common-ligatures ]common-ligatures - Enables display of common ligatures (OpenType features: liga, clig). For OpenType fonts, common ligatures are enabled by default.
    no-common-ligatures - Disables display of common ligatures (OpenType features: liga, clig).
  • <discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]discretionary-ligatures - Enables display of discretionary ligatures (OpenType feature: dlig). Which ligatures are discretionary or optional is decided by the type designer, so authors will need to refer to the documentation of a given font to understand which ligatures are considered discretionary.
    no-discretionary-ligatures - Disables display of discretionary ligatures (OpenType feature: dlig).
  • <historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]historical-ligatures - Enables display of historical ligatures (OpenType feature: hlig).
    no-historical-ligatures - Disables display of historical ligatures (OpenType feature: hlig).
  • <contextual-alt-values> = [ contextual | no-contextual ]contextual - Enables display of contextual alternates (OpenType feature: calt). Although not strictly a ligature feature, like ligatures this feature is commonly used to harmonize the shapes of glyphs with the surrounding context. For OpenType fonts, this feature is on by default.
    no-contextual - Disables display of contextual alternates (OpenType feature: calt).

Example

<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 {
  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;
}

Browser Support

The following table will show you the current browser support for the CSS font-variant-ligatures property.

Desktop
Edge Chrome Firefox Opera Safari
793434219.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
3434219.3237

Last updated by CSSPortal on: 2nd January 2024