jbarker.com / blog

Icon

May 29, 2011

“Resource interpreted as Font but transferred with MIME type …”

Share now:
Facebook Twitter Reddit Delicious Stumbleupon Posterous Tumblr Linkedin Email

Have you seen a warning like this in your web browser console?

“Resource interpreted as Font but transferred with MIME type ...“

Google Chrome web browser

Some browsers, like Google Chrome, will show this warning when a font is downloaded from a web server that sets an unexpected MIME type for fonts.

For many font types, there is a solution!

Update the configuration for your web server with the following MIME type per font file extension:

  • .ttf — font/truetype
  • .otf — font/opentype
  • .eot — application/vnd.ms-fontobject
  • .woff — application/x-font-woff

If you are using Apache configuration, you may include the AddType directive for each font type:

AddType application/vnd.ms-fontobject eot
AddType font/opentype otf
AddType font/truetype ttf
AddType application/x-font-woff woff

With a specific MIME type configured per font, and not the generic application/octet-stream MIME type, you should no longer see a warning in your web browser console.

This configuration — while effective for cleaning up your console — does not include the technically correct MIME type for fonts like OTF, TTF, and WOFF. For these font types, an official MIME type has not (yet) been approved. An official type for WOFF — application/font-woff — has been requested.

Share now:
Facebook Twitter Reddit Delicious Stumbleupon Posterous Tumblr Linkedin Email

Category: software

Tagged: , ,

  • Jimeet Jain

    HOW TO SOLVE THIS PROBLEM IN IIS SERVER

    • http://twitter.com/greggles Greg Knaddison

      Uninstall IIS. Install Apache. Follow the above instructions.

      While you’re at it, inspect your caps lock key. It seems to be stuck.

      • Not a bigot

        Oh god, what a terrible reply. Buy a ticket for the clue bus, please.

        Jimeet, edit your mime types in the IIS management tool.

        • Greg Knaddison

          Perhaps my response was overly snarky, but…but…not my fault. The all caps made me do it :p

          • http://www.jonathan-dumaine.com Jonathan Dumaine

            No, your response was the appropriate level of snarkiness.

  • Floris Maaskant

    For me this did work… however keeping up with ongoing development of the MIME-type specifications will be necessary…

  • phpMagpie

    Would really like help with solving this annoying issue.

    website http://www.firstaidneas.co.uk showing two woff resource errors. I have added extra mime types to the server’s config and included the following in the root .htaccess for this domain, but I still get the warnings.

    AddType application/vnd.ms-fontobject eot
    AddType application/x-font-ttf ttf
    AddType application/x-font-woff woff

    AND

    AddType application/vnd.ms-fontobject .eot
    AddType application/x-font-ttf .ttf
    AddType application/x-font-woff .woff

    Any help would be appreciated,

    phpMagpie

    • http://www.jbarker.com/ Jay Barker

      @phpMagpie The error I see is: Resource interpreted as Font but transferred with MIME type text/html: http://www.firstaidneas.co.uk/theme/Neas/css/font/ubuntu-b-webfont.woff

      One header for this file response is:
      Content-Type:text/html; charset=UTF-8

      This looks like a server-side issue with Apache configuration. My advice to is review the Apache documentation to be certain that you are setting the types in the correct place. Also check the Apache logs for any error messages from when the server is restarted (or when a new .htaccess configuration file is read) which may indicate a malformed configuration.

      • phpMagpie

        Thanks for replying so promptly.

        I just managed to figure out how to use the Network tab of Chromes console to see the server’s response to these two woff files, so I can now understand that until the server responds correctly I can’t do much.

        So to try and find a solution to this I have posted a message in the DirectAdmin forum to try and find out how I get my server to behave correctly as I have already tried adding the AddType to the httpd.conf and have just tried adding this Mime Type into the mime.types file to no avail.

        I will keep you posted.

  • http://twitter.com/boybawang boybawang

    I am using godaddy shared hosting using IIS7. application/vnd.ms-fontobject does not work for eot if using IE less than version 9. I resorted to using font/eot for the mime type.

  • Pingback: Michael Sharman - chapter31 » Setting font MIME types in apache()

  • Julian

    Worked for me, thank you!

  • Jake Forrester

    Short, to the point, and copy-pastable. Excellent post. Thanks :)

  • Pingback: Google Chrome gives warning Resource interpreted as Font but transferred with MIME type application/octet-stream: | Ngoding()

  • http://hausofalexander.tk/ Alexander Rhett Crammer

    How would I fix this using WEBrick and Puma for a Rails application?

Categories

Pages