CSS font-variant-ligatures Property
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 | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
79 | 34 | 34 | 21 | 9.1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
34 | 34 | 21 | 9.3 | 2 | 37 |
Last updated by CSSPortal on: 2nd January 2024