Search code examples
cssfontsmobile-safari

Iconfont / webfont not showing in iPhone safari browser

The glyphs in my iconfont, a custom web font in the navigation in my footer, are not showing when viewed on an iPhone. It is iOS 6.1.4

Any idea why this is happening and how to fix it?

Here is a screenshot of the icons in the footer not appearing: enter image description here

Here is a link to the page where this is happening

Solution

  • 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:

    enter image description here