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