2

I'm trying to get IE9 to display a custom font. Should be easy... researched plenty of google sites, and even stackoverflow questions. This is what I've got:

@font-face {
    font-family: "BrushstrokePlain";
    src: url("../../fonts/BRUSHSTP-webfont.eot");
    src: url("../../fonts/BRUSHSTP-webfont.eot?#iefix") format("embedded-opentype"),
         url("../../fonts/BRUSHSTP-webfont.woff") format("woff"),
         url("../../fonts/BRUSHSTP-webfont.ttf") format("truetype"),
         url("../../fonts/BRUSHSTP-webfont.svg#BrushstrokePlain") format("svg");
    font-weight: normal;
    font-style: normal;
}

But IE9 stubbornly refuses to cooperate. The live site is: http://family.steps.org.au

It works on all browsers and IE 7 & 8, except IE9 :(

Edit

This is what I added to my nginx config to get it working:

location ~* \.(eot|ttf|woff)$ {
  add_header Access-Control-Allow-Origin *;
}
Emmanuel
  • 4,933
  • 5
  • 46
  • 71

1 Answers1

2

Your issue is to do with your HTTP Headers. Try adding this to your Apache config file: 

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "http://mydomain.com"
    </IfModule>
</FilesMatch>

Replace mydomain.com with your domain. You are getting a cross-origin error in ie9 becuase you probably do not have .ttf files setup properly in your config. The above code should solve that. Double check, as you may already have this in your config, you may just not have all the file types specified.

Brian Hough
  • 563
  • 2
  • 8
  • Okay, I'll try that. I'm using an nginx server though, so I'll have to work out how to set the Access-Control-Allow-Origin header on that. – Emmanuel Mar 27 '12 at 05:19
  • yep that did it! Thanks a lot. See my edited question for the bit I added to the nginx config file... – Emmanuel Mar 27 '12 at 20:57