Does not work in Firefox due to innertext

[Burkazoid]

Hi @JenniferSimonds

First off, thanks for the plugin. It's really good to have a tidy, neat solution to the font loading problem. :)

I've noticed the plugin does not work in Firefox, at least not for me. This seems to be because Firefox does not support setting element text using innerText (line 52).

An easy way to show this in the console is:

var span = document.createElement("span");
span.innerText = "foo";
console.log(span.outerHTML);

> "<span></span>"

Changing line 52 from span.innerText = aChars[eLang]; to span.textContent = aChars[eLang]; seems to solve the issue (although this won't work in IE8 or lower, but I think that's fine for most people).

I hope this helps!

[JenniferSimonds]

Hi James,

Thanks for the bug report! It seems Firefox actually has a couple problems. (See also Issue #17). I'm fixing the innerText bug, but Firefox is also giving false positives for nonexistent fonts.

To understand how Firefox is failing, we have to know how FontDetect works: It creates an invisible DIV, and inside it a SPAN that contains the full alphabet. When you call isFontLoaded, it sets the span to that font plus each of the standard fallback fonts ("serif", "sans-serif", "monospace", "cursive", and "fantasy") in turn. For each test it compares the width with the previous test. If the width is different than before, it assumes the font you're testing did not load and the tests are falling back to the fallback fonts. (At least some of the fallback fonts are going to produce different widths than the others, so at least one of these tests will produce a different width if the font didn't load.) If the font did get loaded, all the tests would have the same width.

Well, in Firefox, offsetWidth, scrollWidth, and clientWidth are all returning 0 - for every test. So far I haven't gotten it to return anything else for the width.

I'm still investigating this, but if anyone out there knows why this is happening or how to work around it, please let us know!