Icons don't load in iOS + Some IEs under certain conditions

[heyrygar]

Note: I'm using fonts generated in http://icomoon.io/app/

So I get the following error in iOS 6.0 and above:

[Error] TypeError: 'undefined' is not a function (evaluating 'options.error()')
checkDimensions (afontgarde.js, line 80)
(anonymous function) (afontgarde.js, line 83)

I don't know much Javascript but I was able to narrow down what causes it to fail by changing certain conditions:

1. Having line-height (any value) on the html element causes the JS error and therefore class is not added to html

In this case, when I remove the line-height attribute I get no error, the class is added and icons load just fine:
http://circa-79.com/afontgarde-test/icon-test.html

When I add line-height back in the error happens and the icons do not load:
http://circa-79.com/afontgarde-test/icon-test-2.html

1. The second possible issue is with the icon font itself. It all worked fine using the default set from icomoon. Then, I used the app again to add a custom icon and then changed the name of the font. Since then, it hasn't worked. Here is another test page using the original icomoon font which works:

http://circa-79.com/afontgarde-test/icon-test-3.html

Using Browserstack I did other tests and all three example pages were failing in IE 8. In IE 9 and 10 example 2 and 3 failed.

It's a weird one for sure. I've spent way too much time trying to figure this out so I finally gave and posted it here. Hope it's not something simple I missed as is usually the case :)

[zachleat]

Did you run these tests using the newest code?

The options.error bug was fixed 2 days ago: 1cdcf87

However, I’m guessing that was not the root cause of your issue. I looked into this a little and the stock markup.html test works with and without: html { line-height: 1.5; }

Hm, can you try updating and running the test again? I think there is a bug with the font measurement. The other thing you can try is adding more characters to your test string (the second argument):
AFontGarde( 'ci-icons', '\uE600\uE601\uE602\uE613' );

[heyrygar]

Thanks for the quick reply.
I have created a second set of tests with updated files. Unfortunately, the problem remains:

http://circa-79.com/afontgarde-test-2/icon-test.html (Works)
http://circa-79.com/afontgarde-test-2/icon-test-2.html (Does NOT work)
http://circa-79.com/afontgarde-test-2/icon-test-3.html (Works)

For 'icon-test-2.html' I added every single glyph font in my font to the test string as well.

BTW, the icons will work for some reason if I add the test string twice.

Have you tried adding a custom icon to your icomoon font, adding more icons or changing the name of the font?
Any settings in creating the font I should avoid? Just wild guesses.

[badtant]

I'm also having problems with IE 8, 9, 10, 11.
When removing line-height from body it works. I have created a font from icomoon with some custom uploaded icons.

You can see my testpage here:
http://niklasholmberg.se/temp/fonttest/

Or download it here:
http://niklasholmberg.se/temp/fonttest/fonttest.zip

Don't really know what TOLERANCE is. But setting TOLERANCE = 1 makes it work...

Please look into this!

[badtant]

This seem to fix it (in afontgarde.js):

html = '<div style="font-family:%s;position:absolute;top:0;left:-9999px;font-size:48px;line-height:normal;">' + TEST_STRING + '</div>',

I added line-height:normal;

[AndersDJohnson]

+1 adding line-height:normal; fixes my issue as well. The dimensions of my font icon glyphs were very close to the default glyphs rendered by some browsers when there is no glyph in any font in the stack for a particular Unicode code point.
Perhaps we should file as an issue with https://github.com/zachleat/fontfaceonload.

[zachleat]

@adjohnson916’s upstream fixes to fontfaceonload have been merged into the https://github.com/filamentgroup/a-font-garde/releases/tag/v0.1.5 release.

Please reopen if the issue persists.