7

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.

bardiir
  • 14,556
  • 9
  • 41
  • 66
  • Can you please show sample code (HTML+CSS) to demonstrate the problem, and specify which ligatures are the problem? I don’t think Safari uses ligatures by default, and the code posted should prevent it if it does. You could try `‌`, but the symptoms suggest that this is something different. – Jukka K. Korpela Oct 25 '13 at 15:49
  • Safari DOES show ligatures by default now. This was one of the changes in iOS7/Mavericks – bardiir Oct 30 '13 at 08:03
  • Just to add some context for @JukkaK.Korpela - We ran into this problem on a site that embeds a premium font (Serifa). The word "coffee" was displayed as "coee" on iOS7. The accepted answer fixed the issue. – Khan Jan 28 '14 at 17:51

2 Answers2

15

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.

bardiir
  • 14,556
  • 9
  • 41
  • 66
  • Since the code in the question uses `-webkit-font-feature-settings:"liga" 0`, does this mean that this older method is no longer supported? If you look at the rules in Developer Tools, does this old rule appear as disabled/unrecognized? – Jukka K. Korpela Oct 30 '13 at 08:54
0

More Recent (2018):

The one that worked for us is stated in here: https://stackoverflow.com/a/47063000/1920145

Refering to use the current state of the rule:

font-variant-ligatures: none;
DavidTaubmann
  • 3,223
  • 2
  • 34
  • 43