Search code examples
cssgoogle-chromefonts

Disabling font ligatures CSS (letter combining)

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 Sample text in Chrome f and i is combined multiple times

Edge Sample text in Edge

IE11 Sample text in IE

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

Solution

  • 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.