Search code examples
cssfont-face

Webfont not showing in iOS

Why isn't the webfont I am using, for the icons in the footer, showing when this site is viewed in iOS 6.1.4?

I have tried removing the CSS animations on the icons, removing the jQuery on it. Nothing is getting them to show.

Here is the page.

I would greatly appreciate any help in figuring out why this font isn't showing.

Solution

  • Please take a look at this link:

    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?".

     text-rendering: optimizeLegibility;