• Skip to main content
  • Skip to primary sidebar
  • Skip to secondary sidebar
  • Skip to footer

Coding Still

  • Home
  • About

Set mime types for web fonts in IIS

January 13, 2013 By _tasos 17 Comments

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>

Filed Under: IIS, Web Development Tagged With: CSS

Reader Interactions

Comments

  1. Bharat says

    August 7, 2013 at 14:35

    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?

    Reply
    • _tasos says

      August 7, 2013 at 16:15

      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

      Reply
  2. Harry says

    August 15, 2013 at 17:47

    .ttf and .eot both have “application/octet-stream” in IIS, so should I change it to these values?

    Reply
  3. Talha says

    August 17, 2013 at 09:34

    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

    Reply
  4. _tasos says

    August 17, 2013 at 12:31

    @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

    Reply
  5. Lutfor says

    April 3, 2014 at 12:18

    Thank You. Its really help me. Thx again.

    Reply
  6. Chinedu says

    October 30, 2014 at 10:21

    Thanks a lot. You saved me much trouble

    Reply
  7. Kawe says

    February 25, 2015 at 13:01

    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.

    Reply
  8. _tasos says

    February 25, 2015 at 13:06

    Hello Kawe, the code you posted was stripped by WordPress. Try http://pastebin.com/ or a similar service to share code your code.

    Reply
  9. Kawe says

    February 26, 2015 at 11:47

    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

    Reply
  10. _tasos says

    March 3, 2015 at 19:58

    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! 🙂

    Reply
  11. sharath says

    June 4, 2015 at 07:23

    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

    Reply
    • _tasos says

      June 4, 2015 at 15:18

      Hi,

      Try removing the .woff type before setting it. See my addition in the article on how to do that.

      Reply
  12. Ennio Sousa says

    December 29, 2016 at 04:47

    Thanks! You helped me so much.

    Reply
  13. Niv says

    March 30, 2017 at 01:29

    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

    Reply
  14. Nabid says

    June 14, 2017 at 09:23

    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.

    Reply
  15. Paul says

    August 21, 2017 at 21:13

    Your article helped me, thank you for figuring this out and posting this.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Categories

  • .NET Development
  • ASP.NET
  • Databases
  • Fun
  • IIS
  • JavaScript
  • Web Development

Tags

.NET Core Android ANTLR ASP.NET Ajax ASP.NET Core ASP.NET MVC ASP.NET Web Forms AWS Bouncy Castle Chartjs cli Client info detection Comic Continuous integration CSS Data backup Date handling Firebase Firefox addons Github HigLabo HTML5 Image manipulation jQuery JWT MySQL Nodejs Nuget OAuth Objectionjs OOP openssl Oracle ORM PHP Regular expressions SEO Social media SQL SQL Server UI/UX Url rewriting Videos Visual Studio Web design

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Secondary Sidebar

Archives

  • July 2020
  • March 2020
  • August 2019
  • December 2018
  • November 2018
  • February 2018
  • August 2016
  • June 2016
  • May 2016
  • February 2016
  • January 2016
  • August 2015
  • July 2015
  • October 2014
  • July 2014
  • November 2013
  • April 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • August 2012
  • May 2012
  • February 2012
  • December 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010

Footer

Recent Posts

  • Anatomy of an Objection.js model
  • Check your RSA private and public keys
  • Round functions on the Nth digit
  • Send FCM Notifications in C#
  • Jwt Manager
  • Things around the web #5
  • Query JSON data as relational in MySQL
  • Create and sign JWT token with RS256 using the private key
  • Drop all database objects in Oracle
  • Create and deploy a Nuget package

Latest tweets

  • Geekiness Intensifies.. NASA used Three.js to render a real-time simulation of this week's NASA rover landing on M… https://t.co/orgkXnYj9O February 19, 2021 18:12
  • Things I Wished More Developers Knew About Databases https://t.co/h4gfq6NJgo #softwaredevelopment #databases May 3, 2020 12:52
  • How a Few Lines of Code Broke Lots of Packages https://t.co/p7ZSiLY5ca #javascript May 3, 2020 12:48
  • Can someone steal my IP address and use it as their own? https://t.co/HoQ7Z3BG69 January 24, 2020 13:27
  • Organizational complexity is the best predictor of bugs in a software module https://t.co/aUYn9hD4oa #softwaredevelopment January 13, 2020 08:24
  • http://twitter.com/codingstill

Misc Links

  • George Liatsos Blog
  • Plethora Themes
  • C# / VB Converter
  • Higlabo: .NET library for mail, DropBox, Twitter & more

Connect with me

  • GitHub
  • LinkedIn
  • RSS
  • Twitter
  • Stack Overflow

Copyright © 2021 · eleven40 Pro on Genesis Framework · WordPress · Log in