What is a Ligature
A typographic ligature is the combination of two or more letters or characters into a single character or glyph. A common example is combining f with the following letter. For example fi and fl.
More information about ligatures can be found on this wikipedia page.
Ligatures and CSS
Modern browsers have good support for the font-variant-ligatures CSS3 property. This can be used to fine tune control of ligature rendering. You may find this useful if you run into unwanted ligatures and want to disable them for a specific use case.
text-rendering
The CSS property text-rendering provides information to the rendering engine about what to optimize for when rendering text. Setting text-rendering: optimizeLegibility; will cause the browser to emphasize legibility over rendering speed and geometric precision.
Setting optimizeLegibility will also enable optional ligatures and kerning. If you're using a third party CSS framework you may not be aware that this has been enabled.
More info about the text-rendering property on MDN.
font-variant-ligatures
The initial value of this property is font-variant-ligatures: normal; This enables the display of ligatures. Exactly which ligatures are displayed will depend on the font and language. If you want more detailed control there are a number of useful properties you can adjust.
font-variant-ligatures: none;— Disable rendering of ligatures.font-variant-ligatures: common-ligatures— Enable common ligatures e.g. fi, ffi, th or similar.font-variant-ligatures: no-common-ligatures— Disable common ligatures e.g. fi, ffi, th.
Usage Example
.u-disableLigatures {
font-variant-ligatures: none;
}
There are also properties to enable or disable rendering of discretionary-ligatures (specific to the font and defined by the typeface design). historical-lig-values, and contextual-alt-values.
For full details of all possible values you can check out the font-variant-ligatures page on MDN.