Widely availableSupported across all major browsers. Safe to use in production.
Typography Widely available

font-variant-ligatures

The font-variant-ligatures CSS property sets how characters can be visually combined for readability or stylistic reasons.

Typography

Overview

The font-variant-ligatures CSS property sets how characters can be visually combined for readability or stylistic reasons.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-variant-ligatures
34
79
34
9.1
34
9.3
common-ligatures
31
79
34
7
31
7
contextual
31
79
34
7
31
7
discretionary-ligatures
31
79
34
7
31
7
historical-ligatures
31
79
34
7
31
7
no-common-ligatures
31
79
34
7
31
7
no-contextual
31
79
34
7
31
7
no-discretionary-ligatures
31
79
34
7
31
7
no-historical-ligatures
31
79
34
7
31
7
none
31
79
34
7
31
7
normal
31
79
34
7
31
7
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (31)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (79)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (7)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (31)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (7)

Syntax

CSS 
.elegant {
  font-variant-ligatures: common-ligatures
    discretionary-ligatures;
}
.code {
  font-variant-ligatures: none;
}

Live demo

combinecharacter with(common)

CSS combinecharacter with(common) demo.

PreviewFullscreen

combinecharacter none(none)

CSS combinecharacter none(none) demo.

PreviewFullscreen

combinecharacter(discretionary)

CSS combinecharacter(discretionary) demo.

PreviewFullscreen

Use cases

  • Using font-variant-ligatures

    The font-variant-ligatures CSS property sets how characters can be visually combined for readability or stylistic reasons.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features