Search code examples
cssfont-face

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


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

Solution

  • 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'