67

This is driving me crazy.

Just testing a site on IE9 and discovered that the 'live' version is rendering a web font I am using smaller than on the dev version.

Here is a selection of screen grabs:

enter image description here

I am using the Font Squirrel @font-face kit. As you can see, it is fine on Firefox, Chrome and even IE9 when viewing a local version of the site.

The only difference between the local and live versions is that the font is being loaded from a different domain on the live site (I have set up the cross-domain policy correctly, as illustrated by the fact it works on Firefox and Chrome).

I can't remember what it looked like in IE8 (Microsoft, yet again, haven't thought of developers and have installed IE9 over the top of IE8 with no option to run them simultaneously)

The site is at http://enplanner.com so you can view the source.

Any help on this would be most appreciated - thank you in advance.

Edit: I have removed IE9 and discovered that is looks exactly the same on both local and live in IE8. It appears IE8 has a superior rendering engine that is closer to FF/Chrome than IE9. This is quite a depressing discovery.

1
  • The IE9 version doesn't have the same font showing in the live version. If you look at the serifs on the letter 'l', you can see they're different. Why IE9 would not load the same font as IE8 does I couldn't say.
    – Gareth
    Feb 21, 2011 at 14:54

13 Answers 13

62

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.

5
  • So what files is IE9 actually loading to render them? It is displaying the web fonts, it just appears to be rendering them at a different size than FF/Chrome/IE8. Cheers for the Platform preview tip BTW - I forgot I'd installed that...
    – user159895
    Feb 21, 2011 at 15:32
  • 1
    Aah-ha! I'd missed out 'woff' in the FilesMatch line in my Apache config. I'll post the full chunk as an answer so anyone else having this problem knows what to do.
    – user159895
    Feb 21, 2011 at 15:41
  • 2
    Also, I've just today discovered Fiddler (trying to debug this!) which is a magnificent piece of software, so thank you for that!
    – user159895
    Feb 21, 2011 at 15:49
  • this error also occurs if iis isn't configured to send a MIME type for .woff files. adding the mapping for .woff files in IIS fixed my particular issue. assumption is running "IIS Recommended Settings" update probably remedies this issue ??? stackoverflow.com/questions/4689304/…
    – Alex
    Sep 30, 2012 at 15:08
  • This just fixed my problem with a .woff font file getting a 404. Set the MIME type and back it came!
    – xan
    Jan 3, 2013 at 10:51
35

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.example"
    </IfModule>
</FilesMatch>

Replace mydomain.example 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!

3
  • I've tried it with ttf font - and no joy, doesn't work with my domain and even with *. I have working module headers, even properly configured MIME types, just nothing works.
    – Harry
    Aug 3, 2012 at 8:49
  • Yeah, one day Apple said Flash wasn't cool anymore. The other day everyone agreed. And now people suffer with all the small problems, deal with different versions of IE. nuff said, its really the end of the world :P
    – kroe
    Jan 3, 2013 at 18:22
  • Note, if you are using a CDN such as cloudflare you need to purge your cache in order for the changes at your server to propagate through
    – wal5hy
    Oct 7, 2013 at 14:15
8

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.

8

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>
4
  • 9
    This one really isn't a good idea: The methods list only needs to allow GET requests, in order to serve fonts - allowing everything (PUT,POST,DELETE,OPTIONS) to everywhere (*) is opening the gates way too wide.
    – Ben Hull
    Jul 5, 2013 at 0:18
  • nice only here it mention for iis every where else its only appache
    – Amit Singh
    Dec 2, 2013 at 5:08
  • Would this line now be <add name="Access-Control-Allow-Methods" value="GET" /> or <add name="Access-Control-Allow-Methods" value="GET,OPTIONS" />, also will you need to specify the file type rather than a * value?
    – Jay
    Apr 16, 2014 at 11:47
  • Could you update this answer to be for specific files only? Aug 13, 2019 at 17:43
3

I found one workaround. Added this to htaccess.

BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support
3

An alternative solution to using the Access-Control-Allow-Origin header is to embed the font in your CSS using data:.

1
3

Check if you can open in IE the file (your-web.example/your-font.woff), If you receive 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 instructions in this site (Robòtica educativa), I convert my original .ttf font on (http://www.font2web.com/)

1

It's also worth noting that if your assets are hosted on Amazon AWS S3 that you won't be able to set the headers that the server sends. Instead, you will need to configure the CORS settings on your bucket, as per these instructions:

0
1

Don't forget to include .svg -- this can be necessary in some instances. Adding it solved the problem in IE 11

<FilesMatch "\.(eot|otf|svg|woff|ttf)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>
0

To implement in ASP.Net you can use this syntax

Response.AppendHeader("Access-Control-Allow-Origin", "*");
1
  • 1
    How exactly does one implement this? Apr 5, 2014 at 19:13
0

I tried everything from modifying my apache config, and .htaccess files with no luck. In the IE development tools I stumbled upon "Document Mode" and the default was IE7. So after some research I found this meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=9">

Now IE 10, and 9 format my website correctly and display all Font Awesome icons correctly.

Hope that helps...

0

NOT TESTED!
Nginx site file bit for allowing just origin access to font files if your CDN is not public :-) Happy coding

location ~ \.(ttf|otf|eot|woff)$ { 
    Access-Control-Allow-Origin: * 
}
1
  • I think this should be location ~* \.(eot|otf|ttf|woff|woff2)$ { add_header Access-Control-Allow-Origin *; }
    – MagicLAMP
    Dec 15, 2017 at 1:44
-3

After noticing this error in the console (F12): @font-face failed cross-origin request. Resource access is restricted I discovered that my browser (IE11, emulation: IE9) "blocked content to help protect my privacy". By unblocking the content - click the sign next to the url - it worked like it should.

1
  • 1
    While that is great for your personal situation it does not solve the OP's issue for serving to the public at large.
    – azarc3
    Dec 5, 2015 at 1:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.