htmlioscsssafariligature

Prevent ligatures in Safari (Mavericks/iOS7) via CSS

Is there any possibility to prevent Safari/Mobile Safari on Mavericks/iOS7 from rendering ligatures in a Webfont? We're facing issues with not available ligatures in the font beeing displayed as white space.

We already tried using this in the CSS:

-webkit-font-feature-settings:"liga" 0; 
font-feature-settings:"liga" 0; 
text-rendering: optimizeSpeed;

But it's not working, the ligatures are still blank spaces.

Solution

  • We solved this by adding

     -webkit-font-variant-ligatures: no-common-ligatures;

    to the css styles. It prevents the ligatures from appearing and thus the broken symbols in the font.