font-variant-ligatures CSS property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The font-variant-ligatures CSS property controls which ligatures and contextual forms are used in the textual content of the elements it applies to. This leads to more harmonized forms in the resulting text.
Try it
font-variant-ligatures: normal;
font-variant-ligatures: no-common-ligatures;
font-variant-ligatures: common-ligatures;
<section id="default-example">
<div id="example-element">
<p>Difficult waffles</p>
</div>
</section>
@font-face {
font-family: "Fira Sans";
src:
local("FiraSans-Regular"),
url("../../../../../../shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
section {
font-family: "Fira Sans", sans-serif;
margin-top: 10px;
font-size: 1.5em;
}
Syntax
css
/* 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> */
/* Two keyword values */
font-variant-ligatures: no-contextual common-ligatures;
/* Four keyword values */
font-variant-ligatures: common-ligatures no-discretionary-ligatures
historical-ligatures contextual;
/* Global values */
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: revert;
font-variant-ligatures: revert-layer;
font-variant-ligatures: unset;
The font-variant-ligatures property is specified as normal, none, or one or more of the other value types listed below. Spaces separate multiple values.
Values
normal-
This keyword activates 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 valuesligaandclig. Two values are possible:common-ligaturesactivating these ligatures. Note that the keywordnormalactivates these ligatures.no-common-ligaturesdeactivating 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-ligaturesactivating these ligatures.no-discretionary-ligaturesdeactivating the ligatures. Note that the keywordnormalusually 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-ligaturesactivating these ligatures.no-historical-ligaturesdeactivating the ligatures. Note that the keywordnormalusually 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:contextualspecifies that the contextual alternates are to be used. Note that the keywordnormalusually activates these ligatures too.no-contextualprevents their use.
Formal definition
| Initial value | normal |
|---|---|
| Applies to | all elements and text. It also applies to ::first-letter and ::first-line. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
font-variant-ligatures =
normal |
none |
[ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]
<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
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>
CSS
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;
}
Result
Specifications
| Specification |
|---|
| CSS Fonts Module Level 4 # font-variant-ligatures-prop |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
font-variant-ligatures
|
|
|
|
|
|
|
|
|
|
|
|
|
common-ligatures
|
|
|
|
|
|
|
|
|
|
|
|
|
contextual
|
|
|
|
|
|
|
|
|
|
|
|
|
discretionary-ligatures
|
|
|
|
|
|
|
|
|
|
|
|
|
historical-ligatures
|
|
|
|
|
|
|
|
|
|
|
|
|
no-common-ligatures
|
|
|
|
|
|
|
|
|
|
|
|
|
no-contextual
|
|
|
|
|
|
|
|
|
|
|
|
|
no-discretionary-ligatures
|
|
|
|
|
|
|
|
|
|
|
|
|
no-historical-ligatures
|
|
|
|
|
|
|
|
|
|
|
|
|
none
|
|
|
|
|
|
|
|
|
|
|
|
|
normal
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Requires a vendor prefix or different name for use.
- Has more compatibility info.