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

Question

I keep getting this warning

Resource interpreted as Font but transferred with MIME type application/octet-stream: "http://127.0.0.1:8080/assets/font/fontawesome-webfont.woff".

I am using Play 2.0.4 webserver. I added the mime-types to my application.conf file as follows

mimetype.eot = application/vnd.ms-fontobject
mimetype.otf = application/octet-stream
mimetype.ttf=application/x-font-ttf
mimetype.woff = application/x-font-woff

Any idea what I may be doing wrong.

Guarav, please select my answer when you get a chance. Thanks — Abram, Feb 22 '13 at 20:17

score 30 · Accepted Answer · edited May 08 '15 at 16:17

30

Actually, I found the answer:

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/truetype ttf
AddType application/x-font-woff woff
AddType font/opentype otf

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.AddType font/opentype otf

http://www.jbarker.com/blog/2011/resource-interpreted-font-transferred-mime-type

edited May 08 '15 at 16:17

Yann Chabot

4,789
3
39
56

answered Nov 12 '12 at 09:14

Abram

39,950
26
134
184

1

I'm using MAMP and have this same problem with fontawesome woff font. I added "application/x-font-woff woff" to my MAMP/conf/apache/mime.types file, and "AddType application/x-font-woff woff" to my MAMP/conf/apache/httpd.conf file, but still have the warning coming up in Chrome... Not sure about what to do with the magic file as mentioned in http://stackoverflow.com/a/3226777/1362009 ? – RayOnAir Jan 12 '13 at 18:21
@RayOnAir Adding this to .htaccess in MAMP works for me - the docs say that the addType directive can be used in the following contexts: server config, virtual host, directory, .htaccess - http://httpd.apache.org/docs/2.2/mod/mod_mime.html#addtype – ptim Apr 25 '13 at 16:16
5

According to [this spec](http://www.w3.org/TR/WOFF/#appendix-b) application/font-woff is now officially recommended. – mjallday May 08 '13 at 20:54
application/font-woff worked for me in MAMP Pro when the others did not. Thank you marshall – Chad Jul 18 '13 at 15:57

score 4 · Answer 2 · edited May 23 '17 at 11:43

4

For my IIS instance, i had to use the following:

.woff — application/font-woff (not application/x-font-woff)

See:

edited May 23 '17 at 11:43

Community

1
1

answered Sep 04 '13 at 20:03

Eric

354
1
3
11

score 2 · Answer 3 · edited Jul 16 '13 at 08:08

2

If you're using a Rack-based app, you can amend the Rack::Mime::MIME_TYPES hash in your config.ru:

# Additional mime types
Rack::Mime::MIME_TYPES.merge!({
  ".eot" => "application/vnd.ms-fontobject",
  ".ttf" => "font/ttf",
  ".otf" => "font/otf",
  ".woff" => "application/x-font-woff"
})

edited Jul 16 '13 at 08:08

user2398029

6,699
8
48
80

answered Jun 28 '13 at 22:08

Christophe Marois

6,471
1
30
32

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

3 Answers3

Linked