In writing and typography, a ligature occurs where two or more graphemes or letters are joined as a single glyph. An example is the character æ as used in English, in which the letters a and e are joined. The common ampersand (&) developed from a ligature in which the handwritten Latin letters e and t (spelling et, from the Latin for “and”) were combined.
— “Typographic ligature” from Wikipedia
In many browsers, letter combinations which commonly have ligatures are changed on screen. Common ligatures include:
- ffl > ffl
- ffi > ffi
- fl > fl
- fi > fi
- ff > ff
The simplest answer we have is to use the following CSS
font-variant-ligatures: none;
If you’ve ever asked “How do I remove ligatures from WordPress” or “Why are words with fi in displaying as joined characters on my website?” then this could be the answer for you.
Removing ligatures is only required when using fonts that support them, but it is a common issue with a solution that is not obvious to every one.
Let us know if this answer helps you out, and feel free to share it.
