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/iconFont.ttf".

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

Here is my declaration:

@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 already search on other posts but no luck so far.

Please note that my server is IIS from Microsoft.

Any idea how can I avoid this warning?

Thanks.

score 87 · Answer 1 · edited May 23 '17 at 12:33

87

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.

edited May 23 '17 at 12:33

Community

1
1

answered Mar 20 '13 at 11:27

97ldave

5,249
4
25
39

I added these 4 lines at the end of my file, but I still get the error. How long does it take to make this working? – Michiel Jun 19 '13 at 12:29
Did you try resetting/restarting your web server? IIS? Have you checked out the 2 links in my answer too? – 97ldave Jun 19 '13 at 19:43
I'm not using a web server - how can you fix this without one? – d13 Jun 29 '13 at 08:16
11

According to [this answer](http://stackoverflow.com/a/5142316/907467) `application/x-font-woff` became `application/font-woff`. – renadeen Jul 24 '13 at 07:38

score 46 · Answer 2 · answered Apr 11 '13 at 08:16

46

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.

answered Apr 11 '13 at 08:16

The Senator

5,181
2
34
49

5

I guess that [the comment on the currently accepted answer](http://stackoverflow.com/questions/15521130/google-warning-resource-interpreted-as-font-but-transferred-with-mime-type-appl#comment26019030_15522254) regarding removing the `x-` from the mime type is applicable to this answer as well. – Tom Fenech Nov 27 '14 at 11:47
2

Thanks! I've also added these two lines based on your answer (Semantic-UI uses it) – mike123 Mar 13 '15 at 15:04

score 26 · Answer 3 · answered May 09 '13 at 19:33

26

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.

answered May 09 '13 at 19:33

Steven

1,052
17
30

1

Thanks for saving me another Google search :) – Simon Jun 15 '13 at 09:57
1

No problem mate :). | If you get the warning with font-awesome(http://fortawesome.github.io/Font-Awesome/), just put this in your Nginx Mime Type File: application/x-font-woff .woff – Steven Jun 15 '13 at 18:10

score 14 · Accepted Answer · answered May 13 '13 at 07:24

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>

score 10 · Answer 5 · answered Jun 27 '13 at 12:01

10

Correct MIME types for fonts are:

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

answered Jun 27 '13 at 12:01

Sven

856
10
10

Daan · Answer 6 · 2014-06-23T11:58:37.043

3

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'

edited Jun 23 '14 at 11:58

answered Nov 25 '13 at 07:33

Daan

7,685
5
43
52

I added the essentials – Daan Jun 23 '14 at 11:59

score 1 · Answer 7 · answered Apr 05 '15 at 19:48

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>

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

7 Answers7

Linked