Question

Possible Duplicate:
@font-face not working on a client site?

I have the following font files in this folder structure in my ASP.Net MVC web app:

-[root]

|– Public

||–fonts

|||–NuvoWeb-Medi.eot

|||–NuvoWeb-Medi.woff

In my CSS file I have the following font declaration:

@font-face 
{
    font-family: NuvoWeb;
    src: url(/Public/fonts/NuvoWeb-Medi.eot);
}
@font-face 
{
    font-family: NuvoWeb;
    src: url(/Public/fonts/NuvoWeb-Medi.woff) format('woff');
}

However, when I run the app, Firebug returns the following error:

“NetworkError: 404 Not Found –
http://localhost:60194/Public/fonts/NuvoWeb-Medi.woff“

Please advise as to what I am missing in order to get this to work.

Answer 1

Found the solution here…

The problem is that IIS doesn’t know how to serve these new files unless we tell it how. This can be easily done in the web.config’s in the web.config’s <system.webServer> section by adding the following snippet:

<staticContent>
    <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
    <mimeMap fileExtension=".m4v" mimeType="video/m4v" />
    <mimeMap fileExtension=".ogg" mimeType="video/ogg" />
    <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
    <mimeMap fileExtension=".webm" mimeType="video/webm" />
    <mimeMap fileExtension=".oga" mimeType="audio/ogg" />
    <mimeMap fileExtension=".spx" mimeType="audio/ogg" />
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    <mimeMap fileExtension=".svgz" mimeType="image/svg+xml" />
    <remove fileExtension=".eot" />
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <mimeMap fileExtension=".otf" mimeType="font/otf" />
    <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
</staticContent>

Note that some of these extensions may already be handled in IIS (for me, .svg was fine). You either need to remove those maps from this section, or include additional <remove> lines like the one for .eot.