Font not loading in IE 9

Question

In my CSS style sheet, the first entry is

@font-face {
    font-family: "Font";
    src: url(link) format("truetype");
}
p.customfont { 
    font-family: "Font", Verdana, Tahoma;
}

This is not a font commonly installed on computers. Chrome loads this font and uses it in the correct places, but IE 9 will not. Now as a lot of people still use IE, this got me worried. I tried on a lot of other computers, and chrome works fine on all, but IE also fails on all.

How can I fix this?

EDIT: For future reference - http://everythingfonts.com/font-face converts the ttf for you to all the formats needed, and creates the css - so a lot of time saved

Have a read of http://www.fontspring.com/blog/fixing-ie9-font-face-problems — ʰᵈˑ, May 14 '14 at 15:46
"a lot of people still use IE" - you say that like IE's a dying breed. — Niet the Dark Absol, May 14 '14 at 15:47
Use the `eot` and `woff` file format! You can use online converters for that. — Adrian Preuss, May 14 '14 at 15:47
@NiettheDarkAbsol to me it is - I hate it - had too many bad experiences with it (including this one) — CalvT, May 14 '14 at 15:50
@CalvT Weirdly, I have *no* bad experiences with it. Maybe it's because my plan was always "work in IE, don't use hax, and it'll work in all other browsers". Sadly, this is no longer true -glares at Firefox- — Niet the Dark Absol, May 14 '14 at 15:52
@NiettheDarkAbsol true - I live and breath in chrome - Fx29 should be erased - FOREVER — CalvT, May 14 '14 at 16:02

score 3 · Accepted Answer · answered May 14 '14 at 15:53

Generally you should use eot, woff, ttf and svg to support all browsers.

Example:

@font-face {
font-family: 'font';
src: url('../fonts/font.eot'); /* IE9 Compat Modes */
src: url('../fonts/font.eot') format('embedded-opentype'), /* IE6-IE8 */
     url('../fonts/font.woff') format('woff'), /* Modern Browsers */
     url('../fonts/font.ttf') format('truetype'), /* Safari, Android, iOS */
     url('../fonts/font.svg#PlanerRegular') format('svg'); /* Legacy iOS */
}

Font not loading in IE 9

1 Answers1