Stop russian invasion of Ukraine 🇺🇦

Removing font ligatures

Removing font ligatures

In typography, Ligature binds two or more characters into one, which sometimes looks like an issue. Some Web browsers like Safari browser on both Mac OS X and iOS show standard ligatures by default.

The most popular example of font ligatures is a combination of the following letters: fi, fl, ff, ffi, and ffl.

If you have expanded or collapsed tracking (CSS: Letter-spacing) in the font you use, you will see that some letters are defined as one symbol:

I bet you’ll want to disable Ligatures—use the following custom CSS code for the entire website or just for a specific selector by a class name:

/* Disable Ligature for the entire website */
* {
  font-variant-ligatures: none;

/* Disable Ligature for a specific selector */
.class-name {
  font-variant-ligatures: none;

Check the live web example I’ve made in Webflow to see the difference.

Learn more about ligatures issues described by Jason Tselentis, Associate Professor at Winthrop University’s Department of Design.

It might be interesting for you

Let’s create together

Start a project

Let’s create together

What are your interested in?



Personal details

Thank you for getting in touch!
We appreciate you contacting us.
We will get back to you shortly.
Something went wrong while submitting the form.