Font-Face with Wrong Mime Type in Chrome

Chrome Extensions font-face mime-type

This bug has already been fixed since Chrome 28, so the warning message (about svg fonts) is no longer relevant.

In a comment, Josh said that they still experience the problem for extensions, presumably he's getting the following message in the console:

Resource interpreted as Font but transferred with MIME type text/plain: chrome-extension://...

Files within a Chrome extension and app are served with the MIME-types as defined by the operating system (except for a few common formats defined in mime_util.cc). On Windows, these are found in the Windows registry, in Linux in the shared MIME database (accessible via the xdg-mime). If you fix the file association on your system, the warning will disappear. E.g. in Josh's example, mapping .ttf to font/truetype and woff to application/font-woff would fix the problem.

Chrome supports TTF, WOFF and SVG fonts, so if you cannot change the MIME mapping for some reason, you can always switch to a different font. For instance, if your system has a broken MIME-type for .woff files, but a correct mapping for .ttf, just use the following declaration to load the true-type font instead of the .woff font:

@font-face {
  font-family: 'NameOfMyFont';
  src: url('chrome-extension://__MSG_@@extension_id__/fontfile.ttf') format('truetype');
}

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

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>

Font-Face is not working with Chrome

Just a little syntax change. This will work for you:

@font-face {
    font-family: 'headline';
    src: url('../fonts/headline.eot');
    src: url('../fonts/headline.eot?#iefix') format('embedded-opentype'),
         url('../fonts/headline.woff') format('woff'),
         url('../fonts/headline.ttf') format('truetype'),
         url('../fonts/headline.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

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

Font rendering problems in Google Chrome

This problem appear when the webpage goes Live and font is missing at that time.
To fix this issue have to define the .woff font MIME type in config file.

Note: .woff font type is accepted by all latest browser.

Chrome 10/Windows @font-face encoding trouble

It is highly likely that the webfont is not assembled properly.

I have downloaded CaviarDreams font which is used on Sebastian's site and got the same bug.

Then I downloaded it from here: http://www.dafont.com/caviar-dreams.font, used fontsquirrel.com's typekit generator, and the result was perfectly fine.

Stylesheet not loaded because of MIME-type

The issue, I think, was with a CSS library starting with comments.

While in development, I do not minify files and I don't remove comments. This meant that the stylesheet started with some comments, causing it to be seen as something different from CSS.

Removing the library and putting it into a vendor file (which is ALWAYS minified without comments) solved the issue.

Again, I'm not 100% sure this is a fix, but it's still a win for me as it works as expected now.

---

Related Topics