Disabling font ligatures CSS (letter combining)

Question

Modern browsers automatically combine some letters, most commonly 'f' and 'i' to one single character called a ligature. This often optimizes legibility (i.e. easier to read), however sometimes this might not be what a designer wants.

Personally, I had this issue only in Chrome (Version 53.0.2785.101), I, although I cannot be sure, I believe this issue persists in all other versions of Chrome.

Chrome f and i is combined multiple times

Edge

IE11

In this case I was looking for a way to turn it off.

Answer 1

As it turns out, it's definitely possible, it just required some digging. As mentioned on MDN, you can turn off common ligatures:

font-feature-settings: "liga" 0;

This, however, is done by using an obscure css property. Instead, you should use font-variant-ligatures, like so:

font-variant-ligatures: none;

These two properties does the exact same thing, however, the latter one is recommended one.

MDN:

Note: Whenever possible, Web authors should use the font-variant shorthand property or an associated longhand property, font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position.

This property is a low-level feature designed to handle special cases where no other way to enable or access an OpenType font feature exists.

In particular, this CSS property shouldn't be used to enable small caps.

Answer 2

I encountered a similar problem and was directed here by Google. I never want ligatures on any webpage. (When I print a webpage to PDF and use the text-to-speech engine on my PDF reader, it skips speaking the ligatures.) Here is one solution that works for me:

Open the webpage on Chrome/linux (may work on other desktop OSes too). Install the StyleBot extension of Google Chrome. Then, in its options, click "styles" and then "edit global stylesheet". Enter the following (based on the answer of @AwesomeGuy).

body {
font-variant-ligatures: none;
font-feature-settings: "liga" 0;
}

Click "enable global stylesheet". Voila, Chrome never seems to render ligatures again (it renders the characters separately). Also, when I ask Chrome to print web pages to PDFs, characters are rendered separately.