IE9 supports .WOFF; IE8 does not, and supports only .EOT fonts.
Open the IE9 F12 Developer Tools and you see the following messages:
CSS3117: @font-face failed cross-origin request. Resource access is restricted.
Neuton-webfont.woff
CSS3117: @font-face failed cross-origin request. Resource access is restricted.
YanoneKaffeesatz-Regular-webfont.woff
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable.
Neuton-webfont.ttf
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable.
YanoneKaffeesatz-Regular-webfont.ttf
Examining your HTTP headers, it's clear that your cross-domain access is not configured properly, as there is no Access-Control-Allow-Origin
response header on your WOFF files. They're also delivered with the wrong MIME type (text/plain
) although that's not causing your problem. However, failure to map woff
to the correct MIME type can cause problems as some servers will not serve files with "undefined" extensions and will instead return a HTTP/404
error.
OK, here's what worked. Place the following section in your Apache config for the host you're serving the fonts from:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "http://mydomain.com"
</IfModule>
</FilesMatch>
Replace 'mydomain.com' with either your own domain or *
(but be careful using *
as this means anyone can use your CDN)
The '|woff' was what I'd forgotten. Doh!
Regarding the answer of meanstreakuk above, I'd like to complement. We had the same problem and we searched what Google Web Font does. So, we put in our htaccess, this:
Header set Access-Control-Allow-Origin "*"instead of our domain. If the asterisc, as Google does, it works all the time.
For IIS Add the lines below....works like a charm
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
</customHeaders>
</httpProtocol>
</system.webServer>
Check if you can open in IE the file (your-web.com/your-font.woff), If you recive error 404 go to IIS, double-click the "MIME Types" configuration option while having IIS root node selected in the left panel and click "Add..." link in the Actions panel on the right. This will bring up the following dialog. Add .woff file extension and specify "application/x-font-woff" as the corresponding MIME type.
I use this instrucctions in this site (Robòtica educativa), I convert my original .ttf font on (http://www.font2web.com/)
I found one workaround. Added this to htaccess.
BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support
An alternative solution to using the Access-Control-Allow-Origin header is to embed the font in your CSS using data:.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With