Embed Icon fonts, problems in HTML5 targets

Haxe
#1

Hi all,

I just wanted to share something that has breaking our heads for the past days.
We are using a custom font, that contains the icons of our application. The font was generated with Icomoon / Birdfont.
Well, it works fine in Neko, Flash and some HTML5 browsers… and here is where it gets weird.
In chrome, firefox, opera and android it all worked fine, but in Safari for Mac, iOS and IE11 nothing worked. But it is not that the font did not work/load/display. The whole app was not being launched.

After debugging line per line, we found that the issue was the font and the lime loadFont/checkFont functions generated in JavaScript. The checkfont detects that the font is loaded by checking a difference of the width/offset of a span element. (not sure if this hack is the only way, it seems that many js libs do it this way, but it is quite nasty). So when the font is loaded by the browser, the span will change and the checkFont routine will detect that change (there is a interval of 50ms checking for that)
The thing is if your font (like our icon font) has none of the characters included into the span, it will not change when the font is loaded (for the browsers listed before, not sure how it detects the change in the others, but that is a different story).

So I added to our icon font an icon for the character #, and now it works across the board. (Icomoon generates the icons using very high unicode character ids: U+e600 usually)

So if you are using icon fonts, I would recommend you to have at least one of the following chars covered in your font: “giItT1WQy@!-/#” (that is the current lime span text for checking if the font is loaded)

Hope this helps!
Enjoy coding,
Fran

1 Like
#2

Good find!

That certainly is an odd implementation. There’s probably a good reason if a bunch of libraries do the same thing, but on they other hand, they might just be copying one another.

#3

Some browsers support a callback when loaded, if we do not wait, then a first-frame render of a TextField in canvas will fail and never recover :frowning:

Open to ideas for a better workaround! Perhaps a timeout of some sort?

EDIT: There’s also a problem if the loaded font is the same as the default sans or serif font in the browser. Not sure of the best approach :frowning: