A typical @font-face declaration includes a .eot file, a .svg file, a .ttf file and a .woff file. If your IIS does not serve any of the previous file types, you need to set the appropriate mime type.
Simply add the following MIME type declarations via IIS Manager (HTTP Headers tab of website properties):
.eot application/vnd.ms-fontobject .ttf application/octet-stream .svg image/svg+xml .woff application/font-woff .woff2 application/font-woff2
If you do not have access to the IIS Manager, you can add these declarations in your Web.config file, in the <system.webServer> section.
<system.webServer> <staticContent> <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" /> <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" /> <mimeMap fileExtension=".svg" mimeType="image/svg+xml" /> <mimeMap fileExtension=".woff" mimeType="application/font-woff" /> <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" /> </staticContent> </system.webServer>
These settings will help you if the Font Awesome fonts are not showing in IE 9 or 10.
If you still having problems and IIS still is not serving the files, try removing the MIME type declaration before re-declaring it. See the example below for the .woff MIME type.
<system.webServer> <staticContent> <remove fileExtension=".woff" /> <mimeMap fileExtension=".woff" mimeType="application/font-woff" /> </staticContent> </system.webServer>
Thanks for sharing information about mime-type. I faced same issue with linux server. can you help me out how to set mime-type in linux server?
If you want to set custom mime types in Apache, I think you need to edit your .htaccess file.
Check this thread on stackoverflow, it might be helpful. http://stackoverflow.com/questions/13847234/apache2-server-mime-types
.ttf and .eot both have “application/octet-stream” in IIS, so should I change it to these values?
When using Linux Apache for your web site, some configurations require you to add a new MIME type to allow the server to deliver Hyprecosm applet (.hcvm) files. This article describes how to add a new MIME type using Apache.
Details : http://www.hypercosm.com/support/howto6.html
@Harry
I would recommend to use the more specific “application/vnd.ms-fontobject” for .eot files.
The MIME type “application/octet-stream” is a generic type and used is to indicate binary data that does not have a more specific, assigned MIME type.
In practice it is often used as the default MIME for binary, non-text data (and other unrecognized subtypes) that should be downloaded to a file.
See here for more details: http://www.rfc-editor.org/rfc/rfc2046.txt
Thank You. Its really help me. Thx again.
Thanks a lot. You saved me much trouble
Hi,
I am wondering is there different within these declaration:
I am seeing time to times this error:
– Resource interpreted as Font but transferred with MIME type font/x-woff
Is that means that there is also varriant for same declaration?
Thanks for any reply.
Hello Kawe, the code you posted was stripped by WordPress. Try http://pastebin.com/ or a similar service to share code your code.
Hello Again,
I am wondering is there different within these declaration:
I am seeing time to times this error:
– Resource interpreted as Font but transferred with MIME type font/x-woff
Is that means that there is also varriant for same declaration?
the 3 expr:
– mimeType=”application/x-woff”
– mimeType=”application/x-font-woff”
– mimeType=”application/font-woff”
Regards
Hello Kawe,
I found this article in SO (http://stackoverflow.com/questions/16704967/resource-interpreted-as-font-but-transferred-with-mime-type-application-x-font-w) where it mentions that according to the W3C spec the correct MIME type is “font-woff”.
The other are variations that browsers used before the spec suggested the “font-woff” MIME type (e.g. x-font-woff was Chromium specific, see also http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts), I will update my post accordingly! 🙂
Hi,
I am facing these mime type issue for font files (.woff, .woff2, .ttf).
My website is working fine when browsed with http, but if i browse the site in https, i am getting mixed content error and font will not load. I have not hard-coded the protocol for the font file, it is relative path.
I faced this problem earlier for .woff2, after adding the required MIME type in IIS it got fixed. But now again facing the same issue. MIME type still there in IIS.
What could be the reason!?
With same IIS settings, my production server shows error for all the font related file types (.ttf, .woff, .woff2) and all are actually present in IIS.
Please suggest.
Thanks,
Sharath
Hi,
Try removing the .woff type before setting it. See my addition in the article on how to do that.
Thanks! You helped me so much.
I am having the same issue but with ADFS 3.0 landing page. It doesn’t have IIS anymore but a stripped down http.sys process that handles all http requests. Does anyone know how these additional mime types can be enabled in that?
thank you
It worked for me in IIS Express. I was facing fonts not found problem for font-awesome-4.7.0. Removing mime-types and re-including in web config solved the problem.
Your article helped me, thank you for figuring this out and posting this.