CSS-defined font not found

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.

As I said, I have those files in the indicated folder structure; They are definitely there when I open the folder in Windows Explorer. And if I click on the link, I get this response: HTTP Error 404.3 - Not Found The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map. — Shawn de Wet, Apr 28 '12 at 06:53
So files are in folder, but not served by server? And that is a server problem, not css, Am I right? — Grzegorz Łuszczek, Apr 28 '12 at 07:50
see this : http://stackoverflow.com/questions/2714429/font-face-not-working-on-a-client-site — Jack, Apr 28 '12 at 09:38
You could see this thread about fonts not rendering properly. http://stackoverflow.com/questions/32692151/fonts-are-not-rendered-correctly-in-release-mode-but-is-working-on-debug-mode-i?answertab=votes#tab-top — decodingpanda, Sep 23 '15 at 03:40

score 68 · Accepted Answer · edited Oct 07 '15 at 22:01

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.

For some reason, adding these to my web.config for a site hosted within the Rackspace Cloud breaks all of my CSS, as if the CSS file is no longer recognized. Any clue why that would happen? — Eric K, Dec 19 '12 at 16:21
This is so making people's day. For some reason I was trying to add filehandler rule for OTF files. — Johnny_D, Sep 08 '13 at 21:29
Based on this answer (http://stackoverflow.com/a/16708374) the MIME type for woff files is actually "application/font-woff". I got a complaint from Chrome when I used "font/x-woff" that the server was transferring a font with the wrong MIME type. I changed to "application/font-woff" and that complaint went away. — Steve Hiner, Sep 03 '14 at 20:45

score 7 · Answer 2 · edited Oct 08 '12 at 06:04

7

Register the MIME type in web.config as follows:

<system.webServer>
    <staticContent>
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    </staticContent>
</system.webServer>

This solves the problem.

edited Oct 08 '12 at 06:04

Ulf Lindback

13,974
3
40
31

answered Aug 06 '12 at 08:00

Amrik Singh

503
5
4

if you can here me, then please tell me the way to update the web.config through ftp. I am new for IIS server. Or please tell me that "am I able to do it? or need ask to my web hosting support that?" – Mar 04 '14 at 18:09

ShibinRagh · Answer 3 · 2012-04-28T08:20:52.917

2

public folder(css here) ---> font folder (font here -NuvoWeb-Medi.eot)

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

you were missed quotation symbol font-family: 'NuvoWeb';

edited Apr 28 '12 at 08:20

answered Apr 28 '12 at 07:58

ShibinRagh

6,530
4
35
57

CSS-defined font not found

3 Answers3