@font-face works locally on IE10, but not on the s

I checked and the font files are on the server:

@font-face {
    font-family: 'DroidSerifRegular';
    src: url('fontface/DroidSerif-Regular-webfont.eot');
    src: url('fontface/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontface/DroidSerif-Regular-webfont.woff') format('woff'),
         url('fontface/DroidSerif-Regular-webfont.ttf') format('truetype'),
         url('fontface/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
    src: local('☺'),
         url('fontface/DroidSerif-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'DroidSerifItalic';
    src: url('fontface/DroidSerif-Italic-webfont.eot');
    src: url('fontface/DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontface/DroidSerif-Italic-webfont.woff') format('woff'),
         url('fontface/DroidSerif-Italic-webfont.ttf') format('truetype'),
         url('fontface/DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
    src: local('☺'),
         url('fontface/DroidSerif-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

EDIT: What's weird is that the font is showing correctly in IE8, but not IE9 or IE10.

I also tried:

@font-face {
    font-family: 'DroidSerifRegular';
    src: local('☺'),
         url('http://www.mysite.ca/themes/mysite/fontface/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.mysite.ca/themes/mysite/fontface/DroidSerif-Regular-webfont.woff') format('woff'),
         url('http://www.mysite.ca/themes/mysite/fontface/DroidSerif-Regular-webfont.ttf') format('truetype'),
         url('http://www.mysite.ca/themes/mysite/fontface/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

And my .htaccess:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

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

Another EDIT:

I just checked in IE and I am getting this message:

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable

回答1:

Try to remove this part:

local('☺')

Or add the rest of fonts in this part too, like

src: local('☺'),
url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');

And can you confirm you have all these fonts on server too?

Try to use this tool to create yout fonts: http://www.fontsquirrel.com/tools/webfont-generator

Select the 'expert' control option and change from 'EOT Compressed' to 'EOT Lite'

回答2:

I had the same problem on an IIS-Server and finally realized, that I had to add the mime-type "woff" to the ISS, so that the file is delivered. It seemed like the other browsers supportet other filetypes, so that they took others when they could not access the woff, but ie11 needed the woff.

回答3:

IIS-Server versions prior to 8 seem to not have the mime-type "woff" added by default. Add it to the list (server > your site > mime-types) and you should be fine. This at least solved the CSS3114 error in IE 11 for me. FF and Chrome never had a problem with it, as they seem to be less restrictive in this point.