Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS-defined font not found [duplicate]

Tags:

css

webfonts

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.

like image 760
Shawn de Wet Avatar asked Apr 28 '12 06:04

Shawn de Wet


People also ask

What is@ fontface in CSS?

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.

How to declare font in CSS?

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".

How to define font family?

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).

What is the use of font family property in CSS?

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.


2 Answers

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.

like image 181
Shawn de Wet Avatar answered Sep 29 '22 06:09

Shawn de Wet


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.

like image 38
Amrik Singh Avatar answered Sep 29 '22 08:09

Amrik Singh