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

Question

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>

Echeverria

Have u found any solutions for this? – Sorilda

correction for ttf fantomfactory.org/articles/mime-types-for-web-fonts-in-bedsheet – Pollinate

Answers here explains a lot: #7416140. – Tanah

Answer 1

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

Pollinate

For .woff2 files: <mimeMap fileExtension=".woff2" mimeType="font/woff2" /> See w3.org/TR/WOFF2/#IMT – Capitalist

Note that font/woff2 is only a proposal and has not yet been accepted by the Internet Assigned Numbers Authority (IANA) - see the The font Top Level Type tracker on the IETF website. – Benedicto

Well now it is accepted! iana.org/assignments/media-types/media-types.xhtml#image So: .woff -> font/woff and .woff2 -> font/woff2 – Palatinate