Removing ligatures from website pages

When adding a text block to my page (and even after adding 2px spacing to the text) I automatically get a ligature for the letters “ff”. I have tried adding CSS coding to remove the ligature feature by clicking on the “wrench”, then clicking on CSS and adding the following coding: -webkit-font-variant-ligatures: no-common-ligatures;

The ligatures still appear. Other than creating a jpeg using Illustrator and placing the text in as an image, does anyone know how to solve this issue?

I can’t imagine what you have against ligatures, but the on way you can solve this, I think, is to use a font which has no ligatures.

1 Like

Ligatures are wonderful, unless you are spacing out your type for design purposes! In Adobe Illustrator, there is an option to release ligatures from your text. I would hate to have design an entire site based in a “ligature free” font.

Letter spacing, other than of capitals, is despised by typographers because they think it is very ugly. I appreciate that this is a matter of opinion but I agree with them.