No Support for Font-Feature-Settings in Safari

Safari font rendering issues

Safari has an issue with fonts. The easiest fix for the duplicate text issue is clarifying the font-weight:

font-weight: 400;

Using Lucho's Javascript's text stroke solution along with specifying font-weight will make your text the same as it is on Chrome.

Iconfont / webfont not showing in iPhone safari browser

The problem is that IOS provides partial support for font-feature-settings CSS property but you can use ligatures in iOS Safari adding text-rendering: optimizeLegibility. The following link (http://clagnut.com/sandbox/opentype/ligatures) shows a text using the font Magenta with Common & Discretionary Ligatures ON and other text with Common & Discretionary Ligatures OFF.

If you access this link from an iOS device you will see that both texts are equal. This means that iOS does not support ligatures only with font-feature-settings and that is why the gyphs in your typography do not work on iOS.

To make it work in iOS, you'll have to add text-rendering: optimizeLegibility to your css. A good reference may be "Tomorrow’s web type today: The fine flourish of the ligature". But, you should read "Is it safe to use the CSS rule “text-rendering: optimizelegibility;” on all text?".

You will find an example of your font working in iOS in the following link:

http://jsfiddle.net/poselab/TQjgC/

text-rendering: optimizeLegibility;

A screenshot of this jsfiddle from an iPhone:

Letters Connected in Safari

From your image, it does not look like a letter-spacing issue, as your first idoes not have the dot on top of it. You might have the css property font-variant-ligatures set to common-ligatures. Try setting it to no-common-ligatures.

EDIT:

Based on the provided jsfiddle, replacing text-rendering: optimizeLegibility with text-rendering: optimizeSpeed; solves your problem.

Here's a more detailed explanation on text-rendering.

font feature settings bug with letter spacing

Nevermind, I figured it out: I just added font-kerning: normal and it worked

---

Related Topics