IE9 blocks download of cross-origin web font

N

13

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.

Nightdress answered 21/2, 2011 at 11:26 Comment(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. – Warfare 21/2, 2011 at 14:54

M

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.

Muncey answered 21/2, 2011 at 15:5 Comment(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... – Nightdress 21/2, 2011 at 15:32

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. – Nightdress 21/2, 2011 at 15:41

Also, I've just today discovered Fiddler (trying to debug this!) which is a magnificent piece of software, so thank you for that! – Nightdress 21/2, 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 ??? #4689804 – Tiphane 30/9, 2012 at 15:8

This just fixed my problem with a .woff font file getting a 404. Set the MIME type and back it came! – Niemi 3/1, 2013 at 10:51

N

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!

Nightdress answered 21/2, 2011 at 15:47 Comment(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. – Silvio 3/8, 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 – Tolerant 3/1, 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 – Wilda 7/10, 2013 at 14:15

F

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.

Fowliang answered 20/12, 2011 at 21:8 Comment(0)

I

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>

Impolite answered 15/2, 2013 at 16:47 Comment(4)

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. – Loudmouth 5/7, 2013 at 0:18

nice only here it mention for iis every where else its only appache – Ulna 2/12, 2013 at 5:8

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? – Stockwell 16/4, 2014 at 11:47

Could you update this answer to be for specific files only? – Jowers 13/8, 2019 at 17:43

P

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

Prearrange answered 8/10, 2012 at 22:15 Comment(0)

C

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/)

Clavate answered 19/4, 2013 at 8:46 Comment(0)

P

3

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

Perichondrium answered 2/1, 2014 at 20:52 Comment(1)

You can use Font Squirrel's webfont generator to embed font in CSS. Click "Expert" mode, scroll down to "CSS" row and select "Base64 Encode" – Flews 9/6, 2015 at 21:34

T

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:

Topmast answered 25/7, 2013 at 18:54 Comment(0)

E

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>

Emalee answered 5/11, 2014 at 23:21 Comment(0)

R

0

To implement in ASP.Net you can use this syntax

Response.AppendHeader("Access-Control-Allow-Origin", "*");

Revkah answered 21/12, 2012 at 20:58 Comment(1)

How exactly does one implement this? – Commentary 5/4, 2014 at 19:13

P

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...

Professional answered 19/9, 2013 at 21:13 Comment(0)

C

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: * 
}

Charbonnier answered 7/7, 2014 at 14:25 Comment(1)

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

P

-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.

Parsec answered 29/1, 2015 at 10:24 Comment(1)

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

Recommended topics

Hot tags