font-face with wrong MIME type in Chrome
Solution 1
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
Solution 2
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
Solution 3
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
moonstruck
I’m a self-taught software craftsman with 10+ years experience specializing in the backend development, deployments, complete tech product delivery and managing agile tech teams. In a life long journey of mastering the esoteric art of software craftsmanship, I've done a little bit of everything, and if there's something I haven't done before, I'll learn it.
Updated on August 18, 2020Comments
-
moonstruck over 3 years
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.
-
moonstruck over 13 yearsThanks a lot. This is very helpful to me. I'm using the .htaccess trick as I have the privilege.
-
David over 11 yearsDoes anybody have an IIS-compatible solution?
-
Alex over 11 years@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 ...
-
David over 11 yearsThe MIME type that Xander refers to, added to the IIS server's list of MIME types, is "application/x-font-woff", per stackoverflow.com/questions/3594823/mime-type-for-woff-fonts.
-
Michiel almost 11 yearsI 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"?
-
fth over 10 yearsIt is not a big deal but confusing issue. Thanks for answer!