Search code examples
iisinternet-explorer-9font-faceinternet-explorer-10webfonts

Custom fonts not displaying within IE9 & IE10

I've been running into multiple issues with utilizing custom fonts at the following location:

I ran into an issue yesterday with Mozilla Firefox and it not displaying a custom font I was linking to our AWS S3 Bucket, which I resolved by hosting the fonts of our actual web server. Now, I'm experiencing an issue with IE9/10 where the fonts are not displaying once again. I found the following discussion here: IE9 Refusing to Load custom font? which somewhat touches on my issue, however, I'm not running an Apache or a nginx setup, I'm on IIS (without actual IIS access).

Here is the CSS code:

/* GOBOLD */
@font-face {
    font-family: 'Gobold';
    src: url('www.shawmut.com/happyholidays/fonts/Gobold.eot');
    src: url('www.shawmut.com/happyholidays/fonts/Gobold.eot#iefix') format('embedded-opentype'),
         url('www.shawmut.com/happyholidays/fonts/Gobold.eot?') format('eot'),
         url('www.shawmut.com/happyholidays/fonts/Gobold.woff') format('woff'),
         url('www.shawmut.com/happyholidays/fonts/Gobold.ttf') format('truetype'),
         url('www.shawmut.com/happyholidays/fonts/Gobold.svg#Gobold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* MOTION PICTURE */
@font-face {
    font-family: 'MotionPicture';
    src: url('www.shawmut.com/happyholidays/fonts/MotionPicture.eot');
    src: url('www.shawmut.com/happyholidays/fonts/MotionPicture.eot#iefix') format('embedded-opentype'),
         url('www.shawmut.com/happyholidays/fonts/MotionPicture.eot?') format('eot'),
         url('www.shawmut.com/happyholidays/fonts/MotionPicture.woff') format('woff'),
         url('www.shawmut.com/happyholidays/fonts/MotionPicture.ttf') format('truetype'),
         url('www.shawmut.com/happyholidays/fonts/MotionPicture.svg#MotionPicture') format('svg');
    font-weight: normal;
    font-style: normal;
}

Can someone PLEASE assist me with resolving this issue, it's kind of driving me bonkers! :)

Solution

  • CORS

    Start by using relative paths, you'll run into problems when someone accesses your site with a non www prefixed URL, as some browsers then won't load your font because of cross origin resource restrictions.

    Of course this could be fixed by sending proper headers, but sticking to relative paths is the smarter option here.

    See also https://developer.mozilla.org/en/docs/HTTP/Access_control_CORS

    Content types

    Make sure that your server sends the proper Content-Type headers, browsers can be picky about that.

    .ttf  > application/octet-stream
     or application/x-font-ttf
     or application/x-font-truetype

.eot  > application/vnd.ms-fontobject

.woff > application/font-woff

.svg  > note sure, probably image/svg+xml

    Missing files

    Also some files are not available, specifically the .woff and .svg ones, so in case the .eot ones cannot be used (there are a lot of EOT fonts around that do not comply with the Microsoft standard, often produced by font converters) there is no fallback available.

    Developer tools

    In case the above doesn't fix the problem, check the network and console tabs in the developer tools, they might give you a clue in case the font files are really not being loaded/used.