LeaVerou
@font-face stops working in IE9 if prefixfree is included
In IE9 the font-files are not loaded if prefix free is included. To test pages
http://mami.popinigis.com/testing/font-test-prefix.html http://mami.popinigis.com/testing/font-test-noprefix.html
In the second file prefixfree is commented out.
use @import rules to import your font-face stylesheets; prefixfree doesn't grok those. It's the very first limitation mentioned in the main prefixfree webpage.
OFFTOPIC--
Using @import within your style sheets to import other style sheets is not recommended, this will slow down your pages/site performance since the files are not downloaded in parallel. Use <link> instead. Or if you're using a CSS preprocessor, then you don't need to worry about this.
Read here:
- 2012 - http://stackoverflow.com/questions/12693643/css-import-vs-link-href
- 2011 - http://stackoverflow.com/questions/7199364/import-vs-link
- 2009 - http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
however using @import JUST for the font-face(s) is not so much overhead, if you put them all in one file, and keep your normal css in link tags
You should not reply on @imports not being picked up by -prefix-free. This might be fixed anytime.
=:D good to know. Hopefully not before the IE9 @font-face issue is fixed, though :)
It's interesting that this bug doesn't occur in all cases. Maybe the difference has to do with having the font hosted on the same domain?
Also, a safer temporary workaround than @import would be the data-noprefix attribute.
I just figured this bug out for myself, I use prefix-free on all my sites and have always had the problem of IE9 loading my fonts intermittently, this really needs to be fixed. Only found this issue here just now.
