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>
Bharat says
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?
_tasos says
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
Harry says
.ttf and .eot both have “application/octet-stream” in IIS, so should I change it to these values?
Talha says
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
_tasos says
@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
Lutfor says
Thank You. Its really help me. Thx again.
Chinedu says
Thanks a lot. You saved me much trouble
Kawe says
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.
_tasos says
Hello Kawe, the code you posted was stripped by WordPress. Try http://pastebin.com/ or a similar service to share code your code.
Kawe says
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
_tasos says
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! 🙂
sharath says
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
_tasos says
Hi,
Try removing the .woff type before setting it. See my addition in the article on how to do that.
Ennio Sousa says
Thanks! You helped me so much.
Niv says
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
Nabid says
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.
Paul says
Your article helped me, thank you for figuring this out and posting this.