font-face with wrong MIME type in Chrome

Question

This is the @font-face declaration I have used:

@font-face {
    font-family: SolaimanLipi;
    src: url("font/SolaimanLipi_20-04-07.ttf");
}

This is working perfectly in Firefox but not in Chrome. After "inspect element" I got the following message:

Resource interpreted as font but transferred with MIME type application/octet-stream.

Any suggestions will be appreciated.

Possible duplicate of http://stackoverflow.com/questions/2871655/proper-mime-type-for-fonts — Mike Kormendy, Oct 29 '14 at 23:02

score 77 · Answer 1 · edited Oct 16 '12 at 21:41

77

As usual, different browsers have different needs. Here is a cross browser @fontface declaration, taken from the Paul Irish blog -

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

.eot is for IE, the rest of the browsers use either .woff or .ttf If you need to generate the different types from the source font, you can use Font Squirrel's font-face generator

You also need to an .htaccess to the location of the fonts adding the following types:

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

edited Oct 16 '12 at 21:41

mrooney

1,994
2
19
30

answered Oct 29 '10 at 12:31

Eran Galperin

86,251
24
115
132

Thanks a lot. This is very helpful to me. I'm using the .htaccess trick as I have the privilege. – moonstruck Oct 31 '10 at 14:37
Does anybody have an IIS-compatible solution? – David Sep 05 '12 at 21:53
1

@david i just fixed the a related issue in iis. appears that there isn't a default mapping for *.woff files*. adding & properly configuring the mapping worked for me ... – Alex Sep 30 '12 at 15:14
1

The MIME type that Xander refers to, added to the IIS server's list of MIME types, is "application/x-font-woff", per http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts. – David Oct 02 '12 at 17:20
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? Or what do you mean by "location of the fonts"? – Michiel Jun 19 '13 at 12:30

score 4 · Answer 2 · answered Jan 24 '13 at 17:11

Your font files are not being trasferred with the proper MIME type. This is a web server configuration issue that can easily be fixed.

For nginx, merge this with existing types config, usually found in the /etc/nginx directory:

types {
    application/vnd.ms-fontobject    eot;
    application/x-font-woff    woff;
    font/otf    otf;
    font/ttf    ttf;
}

For Apache, add these lines to .htaccess found in your Document Root:

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

It is not a big deal but confusing issue. Thanks for answer! — fth, Aug 11 '13 at 21:55

score 4 · Answer 3 · edited May 23 '17 at 11:59

4

You can ignore the warning and may want to consider this post on the topic, Proper MIME type for fonts

Which also mentions the following:

"Note: Because there are no defined MIME types for TrueType, OpenType, and WOFF fonts, the MIME type of the file specified is not considered."

source: http://developer.mozilla.org/en/css/@font-face

edited May 23 '17 at 11:59

Community

1
1

answered Oct 18 '11 at 01:47

Domokun

2,760
1
16
6

score 0 · Answer 4 · answered Nov 25 '13 at 07:32

0

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

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

answered Nov 25 '13 at 07:32

Daan

7,685
5
43
52

score 0 · Answer 5 · answered Oct 29 '10 at 12:33

0

if you can edit an .htaccess file you should try add

addType font/ttf .ttf

otherwise you could use a svg/svgz font instead

answered Oct 29 '10 at 12:33

font-face with wrong MIME type in Chrome

5 Answers5

Linked

Related