Firefox problems with Unicode fonts

Question

I am developing a game in HTML5/Canvas. Most of my game objects are represented as Uncicode glyphs. I have three fonts embedded on the site in a bunch of different formats. All three of these fonts have support for most of the glyphs in the Basic Multilingual Plane and the Supplementary Multilingual Plane (in other words: They contain the symbols I use as game objects).

While I was testing out the prototype across multiple browsers, I quicly realized that something odd was going on in Firefox/Gecko. I put together a little test, and here's what I found.

In Chrome and other Webkit-based browsers, all characters of all the fonts render fine.

Firefox seems to have problems to load the fonts though. This is strange: I have supplied the fonts in all usual formats (ttf, eot, woff, svg), and there's no cross-site shenaningans going on since they are saved in a subfolder of the folder containing the current page. However, firefox shows all text in the default font (Times New Roman) instead. Also interesting to note is the fact that if you use a font that is not included in the web-page but is installed on your local computer, Firefox will show the normal Latin characters, but any other unicode characters will again turn up in Times New Roman.

This is either a bug in Firefox, but more likely is of course that I have made a mistake somewhere. Can someone point out what causes this problem and how to resolve it?

Pictures:

Firefox has trouble with the fonts, they all look the same:

The page as it should look, using Google Chrome:

To check it out yourself, here is the page with the current prototype: http://wmmusic.nl/codexamples/pixijs/fonttest/smuv2.html

EDIT:

After doing some research and asking around in the #firefox IRC channel of Mozilla, I found out that there is something wrong with the .ttf fonts I am using. It seems that somehow some table in the font is corrupted in a way that makes Firefox unable to load it.

The debugger shows the following error :

    [14:05:04.286] downloadable font: table 'post': failed to parse table (font-family: "unifont" style:normal weight:normal stretch:normal src index:2)
    source: http://wmmusic.nl/codexamples/pixijs/fonttest/fonts/unifont5-1.ttf
    [14:05:04.286] downloadable font: rejected by sanitizer (font-family: "unifont" style:normal weight:normal stretch:normal src index:2)
    source: http://wmmusic.nl/codexamples/pixijs/fonttest/fonts/unifont5-1.ttf

It does this for both fonts (unifont and Code2000), in both the .woff and the .ttf formats (those are the ones Firefox reads). Quivira seems to work now. Quivira is the only font I've converted with FontSquirrel since it is the only font small enough to do so. The other fonts I've converted using FontForge(for the .svg format), a CLI called tff2eot (for the .eot format),and a tool from Mozilla called sfnt2woff(for the .woff format).

Now to figure out how to fix these errors and/or make Firefox not care about them.

Answer 1

Add to the page header:

<meta charset="utf-8"> 

By the way, the page takes really long time to load!