5

I'm trying to make a web font and have it deployed on AWS S3.

Works fine in all browsers except IE9 where it says the cross-origin request failed when trying to load the woff file.

I've read lots and lots over many forums about people having the issue, but I've not been able to find a fix.

I think it's something to do with the CORS setup on S3 not sending the correct data or something to IE9?

(works in Firefox, Chrome, IE7,8, etc)

The only suggestions I've seen to fix the problem are, spinning up an EC2 instance and making a web host for the fonts (complete overkill!) and the other one was naming the css file as .php and setting headers in php (but this is daft).

Anyone know how (if at all possible) to fix this issue?

Thanks

Edit

My CORS config:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
TheStoneFox
  • 3,007
  • 3
  • 31
  • 47
  • Can you post your current CORS configuration? – Larry McKenzie May 17 '13 at 00:47
  • @LarryMcKenzie Posted the CORS in the original post now – TheStoneFox May 17 '13 at 05:00
  • Can you explain a little about your web server configuration. Also I found this if it is helpful: http://css-tricks.com/forums/discussion/21452/font-family-not-working-in-ie9-but-all-other-ies/p1 – Larry McKenzie May 19 '13 at 01:23
  • The fonts are hosted on an S3 bucket, so I cannot set any .htaccess file and there is no further configuration that I'm able to do (other than CORS) as far as I'm aware. – TheStoneFox May 20 '13 at 07:53
  • http://stackoverflow.com/questions/12229844/amazon-s3-cors-cross-origin-resource-sharing-and-firefox-cross-domain-font-loa –  May 22 '13 at 15:38
  • I am experiencing same problem. Have you found solution? – Romanych Jul 17 '13 at 15:33

4 Answers4

5

I've just done it. Basically, you can follow the steps to edit your S3 bucket permissions. If you need any further help, leave a comment bellow.

1) Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/

2) In the Buckets list, open the bucket whose properties you want to view and click "add CORS configuration"

amazon-screen-shot

3) Write the rules you are willing to add in between the tags <CORSConfiguration>

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
  </CORSRule>
</CORSConfiguration>

You can learn more about rules at: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

Flavio Wuensche
  • 9,460
  • 1
  • 57
  • 54
0

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.

If you want to keep IE8 on your computer and test against IE9, download the standalone Platform Preview 8 from here

IE9 blocks download of cross-origin web font

Community
  • 1
  • 1
0

You can easily solve this issue by setting the CORS configuration for the S3 bucket you are storing your fonts in.

  1. Enable CORS on your bucket as explained here: http://docs.aws.amazon.com/AmazonS3/latest/UG/EditingBucketPermissions.html

  2. Set the appropriate configuration as specified here: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

douglasr
  • 1,894
  • 1
  • 23
  • 29
0

The thing that made the CORS settings work for me was clicking the DELETE button on the CORS settings page and then adding a new CORS configuration

Editing the existing setting just didn't seem to have any effect until I'd hit the DELETE.

enter image description here

chim
  • 8,407
  • 3
  • 52
  • 60