1

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.

6
  • Looking at the code, I don't see a font being declared. Please post the CSS you are using...
    – Xarcell
    May 15, 2013 at 2:01
  • He is using google web fonts... May 15, 2013 at 2:01
  • @Xarcell It is main.css. The icon font is the 3rd font that is declared: irfandesign.com/dev/assets/css/main.css
    – IMUXIxD
    May 15, 2013 at 23:58
  • @ViníciusMoraes I am using Open Sans, from Google Web Fonts, but that is not the font that I am having trouble with. The font that is not showing, in iOS Safari, is the third custom font-face web font icon-font declared in main.css
    – IMUXIxD
    May 16, 2013 at 0:05
  • 1
    Please include actual code to make this more useful for future visitors.
    – TRiG
    Jan 14, 2014 at 17:54

5 Answers 5

8

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;
0

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/

1
  • Other fonts format use the ꜱꜰɴᴛ format which have several limitations XML doesn’t have. Aug 31, 2015 at 15:16
0

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.

0

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).

-1

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.

1
  • Google web fonts is not the font that I am having support issues with. It is the 3rd custom web-font, an icon font, declared in /assets/css/main.css that is not showing. And it shows in every desktop browser pretty much. Just not iOS safari.
    – IMUXIxD
    May 16, 2013 at 0:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.