asp.net - Custom web font not working in IE9

Question

I downloaded a custom font (Gotham-Light.eot), but it doesn't work on Internet Explorer 9.

@font-face {
    font-family: Gotham-Light;
    src: url('Gotham-Light.eot');
}

This doesn't work. I'm using ASP MVC3 rebuilt, used custom tool, still nothing.

Answer 1

First, the goods:

@font-face {
    font-family: 'ludger_duvernayregular';
    src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');
    src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot?#iefix') format('embedded-opentype'),
         url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.woff') format('woff'),
         url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.ttf') format('truetype'),
         url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.svg#ludger_duvernayregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

p.test {
    font-family: 'ludger_duvernayregular', Arial, serif;
    font-weight: 400;
    color: blue;
}

Note, I used a font face that was purposefully easy to see as working. (And I don't have access to Gotham in a web font, so... I'm not even sure Gotham is licensed to use in web font form. If you do not have a license or the license does not allow for it, please respect that.) So you will have to do a little thinking about the paths to your font files.

What I've done is consult the blog post AlienWebGuy linked to, which is good. It's not long, so I'd read it. It boils down to:

1. Possibly a misconfigured MIME type for the font file. See below for more info. There's also a note that Apache may have this problem, it seems to be more of an IIS issue (according to the article).
2. You can trick (?) IE9 to use the EOT file instead of the WOFF, which apparently fixes the issue (according to the article).

Additionally, and as an aside, IE9 had a problem displaying the font with a jsFiddle demo using the same exact CSS. Very weird. IE7 and 8 worked fine, so I know it was working in some ways. I did not figure out what that was about, but I saved the same markup and CSS to a file on my site and it works fine.

Breakdown...

Let me explain what's going on in the above CSS. I'll go through each line. However, keep in mind I have the web font in the following file formats:

• eot
• woff
• ttf
• svg

You really probably only need eot, ttf and woff if you don't care to support legacy iOS. SVG translations are hard to obtain, though.

Now, first name your font so you can reference it:

font-family: 'ludger_duvernayregular';

IE9 Compat Modes:

src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');

Remember to verify the URLs you're using here actually lead to a real file. Put it in the address bar and see what happens (does it download? 404?).

On the following, though, I'm going to remove the full URL so you can see the entire statement, including the end.

IE6, 7 and 8:

src: url('http://../ludgerduvernay.eot?#iefix') format('embedded-opentype'),

Note this part:

.eot?#iefix <<< See below for an explanation.

Further IE CSS Fix

In some rare cases, IE will fail because the @font-face declaration has too many characters. This can be solved in most instances by adding a ‘#’ hash mark after the ‘?’ question mark. This buys you a bit of extra room.

_{- From the Font Spring article}

I have no idea why this works, so I'm taking their word for it.

Modern Browsers:

url('http://../ludgerduvernay.woff') format('woff'),

Safari, Android, iOS:

url('http://../ludgerduvernay.ttf') format('truetype'),

Legacy iOS:

url('http://../ludgerduvernay.svg#ludger_duvernayregular') format('svg');

Then use it:

p {
    font-family: 'ludger_duvernayregular', Arial, serif;
}

I was actually surprised this works back to IE6. Anyways, notice that I use a full path to the file, not a relative one. That's usually a good place to start; check to make sure the link downloads. I'm making a big deal of this because it's basic and easy to screw up.

So if the file is downloading with the url and you've got it working in other browsers, and in IE6, 7 and/or 8, you can look at another possibility:

Fix IE9 on the Server Side (IIS)

Microsoft’s IIS server will refuse to send resources that it does not have a MIME type for. The syntax we developed forces IE9 to take the WOFF over the EOT, but if it is served on IIS, it will fail. This is because IE9 requests the WOFF file, but since WOFF is not a defined MIME type in IIS, a 404 Not Found error is returned. To solve this, you must add ‘.woff’ with MIME type ‘application/x-font-woff’ to your IIS installation.

_{- From the Font Spring article}

So you may have to check your server isn't borking it. You can also use Chrome Console or Firebug NET tab to view the headers sent with the file.

Now I had a little help here, and I think you should think about the following options:

1. Google Web Fonts. Don't be a hero. They host the font, give you the include stylesheet markup, and presto whammo, you're in business. They also have some pretty cool fonts. There are other web font services, such as Typekit, Webtype, Fontdeck, and Fonts Live.
2. Font Squirrel has a @Font-Face Generator, which can give you all of the files you need (Warning: Only submit fonts you know to be licensed for web use.). Use the Expert mode, and it will give you a ZIP file with lots of great stuff, including a demo. The one I received you can download here. The interesting thing is, the generated CSS is identical to the Font Spring one, minus the comments. That's probably not a coincidence.
3. I found that awesome tool on this Opera Dev page. That is also worth reading.
4. And of course, that blog post AlienWebGuy linked to at Font Spring.

This stuff isn't hard, but you need to know how to troubleshoot. Always check that the file is downloading; you can use Chrome Console Resources tab or Firefox's Firebug add-on and watch the NET tab to see if it downloads. It if just literally won't work, post the page or code somewhere where we can get to it and we can review it.

Happy coding. :)

---

The super awesomely cool font used in the demo is Ludger Duvernay Regular. For more information, see Steve Cloutier/Cloutierfontes site. Thank you for making it free for personal use. :)