1

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

Peter O.
  • 32,158
  • 14
  • 82
  • 96
IMUXIxD
  • 1,223
  • 5
  • 23
  • 44
  • I have a feeling it has something to do with your animations on the icons. Do they appear if you remove the animations? – Jackson May 13 '13 at 00:07
  • @Jackson are you saying the animations are not fully supported so they are hiding the icons? I removed the animations on the icons in the footer and they are still not showing. It is updated if you want to check it out. – IMUXIxD May 13 '13 at 00:25
  • Perhaps it is the font-feature-settings css attribute? ios safari safari only has partial support for this: http://caniuse.com/font-feature – Jackson May 13 '13 at 00:40
  • @Jackson Can't be. I detect when ligatures are not supported using Modernizr and switch to single characters that have the same corresponding icons. – IMUXIxD May 13 '13 at 00:55
  • Your site is really badly broken on the iPhone—way too fancy for its own good, IMHO. The text at the top is mostly covered, and I can't scroll to anything. :-( – ralph.m May 19 '13 at 09:23
  • @ralph.m Yes, I know. I need to fix it up. I will do that after I get the icons to show. Any suggestions? – IMUXIxD May 19 '13 at 15:41

2 Answers2

3

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

Community
  • 1
  • 1
PoseLab
  • 1,841
  • 1
  • 16
  • 22
  • Thank you providing the detail. So, it says it supports ligatures, but only supports them partially and not enough to support them? – IMUXIxD May 21 '13 at 12:18
1

Delete if((Modernizr.prefixed("fontFeatureSettings")) in noLigatures.js. The icons will show in iOS6.

laser apple
  • 86
  • 3
  • ah, so that line in my script is evaluating to true and the ligatures are showing. but they are not supported? – IMUXIxD May 21 '13 at 12:17