Google warning: A resource interpreted as a font but transmitted using an application such as a MIME / octet stream

Question

I have a google warning for my font:

A resource interpreted as a font, but portable using a MIME type / octet stream application: "... / Content / Fonts / iconFont.ttf".

It works even if I have this warning, but I prefer to avoid this warning.

Here is my expression:

@font-face { font-family: 'iconFont'; src: url('../Fonts/iconFont.eot?#iefix') format('embedded-opentype'), url('../Fonts/iconFont.svg#iconFont') format('image/svg+xml'), url('../Fonts/iconFont.woff') format('font/x-woff'), url('../Fonts/iconFont.ttf') format('truetype'); font-weight: normal; font-style: normal; } 

I'm already looking at other posts, but so far no luck.

Please note that my server is Microsoft IIS.

Any idea how I can avoid this warning?

Thank.

Answer 1

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

use the settings on your web.config below:

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

Answer 2

You need to add the following types to .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 the comments below for pointing this out.)

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

Taken from here: a problem with the font in chrome .

Answer 3

Thanks for the @ 97ldave answer above, you can add these types to your IIS webServer configuration section if you don't want to add them directly to your MIME types in your IIS setup. Below is an example of adding only the .woff type that was not in our configuration. This fixed issues with 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 learning about this.

Answer 4

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

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

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

After that restart Nginx: service nginx restart

Done.

Answer 5

The correct MIME types for fonts are:

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

Answer 6

If you start the server with nodeJS, this is a good module for mime type matching

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 7

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

for me, the error completely disappears right after adding these lines to 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>