Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

MIME Types for woff, ttf, svg, and eot 404ing despite being setup in IIS

I am trying to get a font to render within a file and it is giving me the usual error of

Resource interpreted as Font but transferred with MIME type text/html:

But the HTML file on show is our 404.aspx file, I tried the usual of installing the applications in the web.config and then eventually into IIS itself as:

.woff  application/font-woff
.ttf   application/font-ttf
.eot   application/vnd.ms-fontobject
.otf   application/font-otf
.svg   image/svg+xml

I cannot understand where I am going wrong. the files are stored in a folder called fonts that is in the base directory for the site and I have the style within my aspx file as

@font-face {
    font-family: 'segoe_printregular';
    src: url('/fonts/segoepr-webfont.eot'); /* IE9 Compat Modes */
    src: url('/fonts/segoepr-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/segoepr-webfont.woff') format('woff'), /* Modern Browsers */
         url('/fonts/segoepr-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/fonts/segoepr-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

and the stylesheet.css within the fonts folder as:

@font-face {
    font-family: 'segoe_printregular';
    src: url('/segoepr-webfont.eot'); /* IE9 Compat Modes */
    src: url('/segoepr-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/segoepr-webfont.woff') format('woff'), /* Modern Browsers */
         url('/segoepr-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/segoepr-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
    }

I have tried the file paths as /fonts/ and just fonts/ to no avail. But I cannot get the file to bnot 404. Someone suggested restarting the server but that did not achieve anything either.

Is there anything I am missing? Or some mistake that I have made?

If it helps I also tried this in the web.config

<staticContent>
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
    <remove fileExtension=".ttf" />
    <mimeMap fileExtension=".ttf" mimeType="application/font-ttf" />
    <remove fileExtension=".eot" />
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <remove fileExtension=".otf" />
    <mimeMap fileExtension=".otf" mimeType="application/font-otf" />
    <remove fileExtension=".svg" />
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>
like image 670
MageIdiot Avatar asked Oct 03 '14 11:10

MageIdiot


People also ask

What is MIME types in IIS?

MIME types in IIS are used to define and allow a specific file type to be served out by IIS. Usually this is used with new media files types, such as FLV, MP4, and etc.

What MIME type is TTF?

TTF font files has the following MIME type: font/ttf . Before February 2017: TTF does not have a MIME type assigned. You'll have to use the more general application/octet-stream , which is used to indicate binary data with no assigned MIME type.


1 Answers

For those who need answer. Below is solution. Reference http://www.alienfactory.co.uk/articles/mime-types-for-web-fonts-in-bedsheet for details.

<remove fileExtension=".woff" />
<remove fileExtension=".eot" />
<remove fileExtension=".ttf" />
<remove fileExtension=".svg" />

<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".ttf" mimeType="application/font-sfnt" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
like image 51
Osa E Avatar answered Sep 19 '22 08:09

Osa E