JenniferSimonds / FontDetect

A JavaScript class you can use to determine whether a webfont got loaded, which font is being used by an element, or react to a webfont getting loaded (or failing to load).
MIT License
67 stars 10 forks source link

FontDetect failing in IE #17

Open synergyauto opened 9 years ago

synergyauto commented 9 years ago

Hi Jennifer, Outstanding work on this library! One issue we're seeing is in this code in IE 11 FontDetect.isFontLoaded('FontAwesome') This always returns false, no matter how the browser security is setup for font downloads. Conversely, this always returns true FontDetect.isFontLoaded('Trebuchet MS')

When I switch over to Firefox or chrome and run FontDetect.isFontLoaded('FontAwesome') It returns true, so the issue seems to only appear in IE.

Any thoughts on this?

synergyauto commented 9 years ago

An addition to this, on a whim I tried this in FF FontDetect.isFontLoaded('asdfqewwersfdf_no_such_Font_afdewrasfdkas') and it comes back true as well, which is incorrect. Chrome seems better in that it says false to a made up font and true to common ones like Verdana, but it's also saying false for the actual font i'm searching for and I can see the font loaded on screen (it's an icon font family so it's very obvious when it doesn't load).

Really need your help on this, this seems to be the only non-hacky solution I could find but it has to work :)

synergyauto commented 9 years ago

Some testing i ran against 3 font checks, Entypo is the font we're searching for. All tests run from the console and on the same page:

            Verdana   Entypo    Made_up_font
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
IE 11        True      False    False
,,,,,,,,,,,,,,,,,,,,,,,,,,,
Chrome 43     True     False    False
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
Firefox 38    True     True     True
JenniferSimonds commented 9 years ago

Hi synergyauto,

I did a quick check with Chrome 43, Safari 6.2.6, FF 37 & 38 on a Mac, and IE 10 in Win 7/Parallels, and it did detect an existing external font for me. But Firefox did indeed give a false positive for a non-existent font. (FF's problem is probably the same one that causes Issue #15.)

I tested it by going to www.atomicjetpacks.com and testing for Arial, Oxygen (one of the fonts that the website uses, which is loaded from Google Fonts), and "x".

I'll try to test it out with Entypo loaded this week or next. In the meantime, do you know which filetype of Entypo is being called, i.e. ttf, woff, etc.? Is it being hosted locally or somewhere else? Also, does Chrome give the correct answer for you if you test it with another external font?

synergyauto commented 9 years ago

Jennifer, Thanks much for responding!

Entypo loads ttf, woff, svg and eot files. I suppose they're all there for fallbacks of some sort.

As for your 2nd question, this site is locked down so it's rather hard to insert a new font load into it.

In the end, this project has to handle IE browsers that have font download disabled via security and replace a css file with another if that's the situation.
Having said that, if fontdetect completely explodes in every browser other than IE it's not a problem for us (although it is for you lol). I'm going to not run the font.isloaded() check when the browser isn't IE.

So IE not detecting Entypo seems to be the issue here that needs to be solved. It responds appropriately for default fonts and made up fonts.

synergyauto commented 9 years ago

Ah well, management could not wait around for a solution so we're forced to go down another avenue. Take care Jennifer.

mmcguinness commented 9 years ago

I also seem to be having an issue where isFontLoaded is always false in IE11, unless I load a font a second time. Trying to debug my code to see if there's something I'm doing that's causing this. The font does load on the first run, but isFontLoaded keeps returning false.

EDIT: Looks like this was an issue with me blocking the thread with a while loop so that the font wouldn't finish loading. Switched to calling isFontLoaded with setTimeout, and it's working perfectly in IE11.