IE9 Refusing to Load custom font?

2019-07-19 14:49发布

问题:

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

回答1:

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.