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.
The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.
In CSS, we use the font-family property to specify the font of a text. Note: If the font name is more than one word, it must be in quotation marks, like: "Times New Roman".
A font family is a set of fonts that have a common design. Fonts within a family, however, differ from each other in style such as the weight (light, normal, bold, semi-bold, etc.) and the slant (roman or upright, italic and oblique).
The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With