Google warning: Resource interpreted as Font but transferred with MIME type application/octet-stream

Question

I have a warning in Google for my font-face:

Resource interpreted as Font but transferred with MIME type application/octet-stream: \".../Content/Fonts/iconFo

Answer 1

If you run a server with nodeJS, this is a nice module to map your mime types

https://github.com/broofa/node-mime

var mime = require('mime');

mime.lookup('/path/to/file.txt');         // => 'text/plain'
mime.lookup('file.txt');                  // => 'text/plain'
mime.lookup('.TXT');                      // => 'text/plain'
mime.lookup('htm');                       // => 'text/html'

mime.extension('text/html');                 // => 'html'
mime.extension('application/octet-stream');  // => 'bin'

Answer 2

For Nginx: (Path: /etc/nginx/mime.types)

font/ttf                         ttf;
font/otf                         otf;
application/x-font-woff          woff;

You dont need application/vnd.ms-fontobject eot; because it exists already.

After that restart Nginx: service nginx restart

Done.

Answer 3

You need to add the following types to an .htaccess/IIS:

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

Updated .woff type from:

AddType application/x-font-woff .woff

(Thanks to @renadeen in comments below for pointing this out.)

Check out my answer to a similar question here: Font Face not loaded

Taken from here: font-face problem in chrome.

Answer 4

Thanks to @the-senator and @97ldave for their answers

for me the error completely disappear just after adding these lines to the web.config

<system.webServer>
<staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/x-font" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="application/x-font" />
    </staticContent>
</system.webServer>

Answer 5

Thanks for the above answer @97ldave, you can add these types to your IIS webServer configuration section if you'd rather not add them directly to your MIME types in your IIS setup. The following shows an example of adding just the .woff type that was missing from our configuration. This fixed the issues with the fonts not appearing in the latest version of Safari (6.0.3) on my iMac.

<system.webServer>
<staticContent>
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
</staticContent>
</system.webServer>

Thanks to Jon Samwell (my colleague) for finding this out.

Answer 6

another approach on here: http://zduck.com/2013/google-chrome-and-woff-font-mime-type-warnings/

use below settings on your web.config:

<system.webServer>
<staticContent>
  <mimeMap fileExtension=".woff" mimeType="application/font-woff"/>
</staticContent>
</system.webServer>