Removing "ligatures" in WordPress via CSS - 2able - Digital Agency
post-template-default,single,single-post,postid-7711,single-format-standard,ajax_updown_fade,page_not_loaded,,qode_grid_1300,footer_responsive_adv,qode-child-theme-ver-1.0.0,qode-theme-ver-10.1,wpb-js-composer js-comp-ver-5.0.1,vc_responsive

Removing “ligatures” in WordPress via CSS

Removing “ligatures” in WordPress via CSS

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.

In many browsers, letter combinations which commonly have ligatures are changed on screen. Common ligaures include:

  • ffl > ffl
  • ffi > ffi
  • fl > fl
  • fi > fi
  • ff > ff

We’ve seen many examples trying to disable this effect. It seems to happen if the font family being used has ligatures as part of its font set.

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 word with fi in displayng 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.