Browser does not render WOFF fonts (@font-face)

Question

Ok, I have an issue that I cannot figure out, I am trying to research usage of WOFF fonts in Internet Explorer 10.

I downloaded kit from fontsquirrel, and based on the included CSS and HTML files I added fonts to web application. (ASP.NET MVC on IIS 7)

Now TTF fonts work perfectly fine in Firefox and Chrome (IE does not support it), however WOFF fonts do not seem to be working at all (they are supposed to be supported by all newer browsers). If I remove TTF section from below - Firefox and Chrome do not render WOFF font either.

I tripled checked and simplified names of the files, to make sure that it is not an issue.

@font-face
{
    font-family: 'KaratulaNormal';
    src: url('fonts/karan.woff') format('woff'), 
         url('fonts/karan.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

h1
{
    text-transform: uppercase;
    font-family: KaratulaNormal;
}

Why WOFF fonts are not working?

I understand this would be difficult to answer, but any suggestion on how to troubleshoot it are welcome.

Sebastian K Sebastian K · Accepted Answer · 2013-02-10T03:19:13

Bingo. I took it step by step, and after few tries I realized, that If I use original kit WOFF fonts actually work, after that I realized that my code actually works too, but only if it is run from the file system directly, not trough IIS. Once I realized that some googling led me to answer:

http://www.dirigodev.com/blog/404-errors-in-IIS7-for-embedded-woff-font-files/

Basically under IIS7 you need to configure mime type for WOFF fonts, otherwise IIS does not serve them.

Browser does not render WOFF fonts (@font-face)

1 Answers