Webfont not showing in iOS [closed]

Question

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.

Answer 1

You can drop the SVG format. The only reason it was added was before iOS 4.2, Mobile Safari didn't support TrueType font formats. As of iOS 4.2 it natively supported TrueType formatted fonts. Since this updated happened back in Nov. of 2010 I doubt there are very many users at all that use an older version.

http://www.zeldman.com/2010/11/26/web-type-news-iphone-and-ipad-now-support-truetype-font-embedding-this-is-huge/

Answer 2

I think the "real" answer to this is: your glyph font is 404'ing on your web server (when you test it on your device.)

In your CSS, you have '../fonts/glyphs.eot' which is: http://irfandesign.com/fonts/glyphs.eot (and is 404'ing).

Answer 3

I would suggest dropping google web fonts and using css3's @font-face, the support is good enough for it (http://caniuse.com/fontface) and it works on iOS browsers etc. Plus, there are piles of free web-friendly fonts out there to use (not all of them look like shite - do a bit of intense googling). Don't forget to check their licenses to make sure they have the appropriate license for embedding on a website.

Here is a demo of @font-face css :

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
     url('myfont-webfont.woff') format('woff'), 
     url('myfont-webfont.ttf')  format('truetype'),
     url('myfont-webfont.svg#svgFontName') format('svg');
}

then to use it on the page

body {
    font: bold 1em/1.5em 'MyFontFamily', Arial, Helvetica, Geneva, sans-serif;
}

Then you are all set.

Answer 4

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;

Answer 5

I partially recreated your page using a different symbol font and confirmed the same functionality bug on iOS. I was able to get the symbol font to render on iOS making this change:

<li><a class="" href="#">Mail</a></li>

change to

<li><a class="ss-mail" href="#"></a></li>

I am using symbolset because I already have a copy of all the font files, but the functionality bug was similar. In the case of symbolset, using your line of code actually showed the word 'Mail' where the symbol should be on iOS, while the symbol font rendered correctly on desktop browsers. When I switched the code to use the class name, the symbol works on iOS.

Here's a link to my example with the symbol font working on iOS (note: I didn't spend the time to make all the other fonts and javascript work).

Maybe your font has a similar problem rendering the symbols on iOS. If there is an alternative way to apply the font, via a CSS class similar to symbolset, you can try that and see if you get the same results. If not you can always use symbolset or a different symbol font.