Chrome Extensions font-face mime-type

Question

This issue I've solved on the server but not in Chrome extensions. Chrome warns me when I use custom fonts which were loaded with @font-face. For example:

@font-face {
    font-family: 'fontello';
    src:  url("../../fonts/fontello.svg#fontello") format('svg');
    font-weight: normal;
    font-style: normal;
}

And Chrome tells me something like this:

Resource interpreted as Font but transferred with MIME type image/svg+xml: "fonts/fontello.svg#fontello"

So on the server i can forcibly set headers for my fonts, but what i can do in Chrome Extensions? Any kind of Chrome Extensions magic Thanks in advance.

this is an issue for the excellent ChromeShowTitleTag extension, too — ptim, Jun 24 '13 at 00:21
Just ran into this issue, but getting a warning about 'text/plain' being used as the mime type. I downloaded this font myself using the Google Fonts service and stored it in my extensions directory (loading as unpacked). Using chrome dev 36 on win8 x64. — Josh, May 13 '14 at 21:39
not sure if this helps at all: http://stackoverflow.com/questions/15521130/google-warning-resource-interpreted-as-font-but-transferred-with-mime-type-appl/15522254#15522254 — 97ldave, Dec 03 '14 at 12:53
@97ldave, there is no backend in chrome extensions, so there is no `.htaccess` or something like that. — nick.skriabin, Dec 07 '14 at 16:00
I wasn't sure. Can you use File Handlers to solve the problem? https://developer.chrome.com/apps/manifest/file_handlers OR http://stackoverflow.com/questions/14713109/mimetype-handling-by-chrome-extension-packaged-apps — 97ldave, Dec 08 '14 at 08:51
Wow, i didn't know about such feature of `manifest`. Probably it should solve the problem. — nick.skriabin, Dec 09 '14 at 13:08
@nicholas_r did manifest solve the problem? If so, can you post your answer so others can see how the problem was solved. Thanks. — 97ldave, Dec 24 '14 at 11:56
@97ldave this solution is not yet checked because i'm no longer working on this project. So if i'll have the ability to check this out i'll post results here. But as i can understood description of `File Handlers`, this feature is mostly used to describe which types will handle your `packaged app`. For example if you're creating a text editor you should list all file types which should be handled by your app, e.g. txt, js, css, html and so on. — nick.skriabin, Dec 24 '14 at 12:08

score 1 · Accepted Answer · answered Jan 17 '15 at 21:49

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');
}

Chrome Extensions font-face mime-type

1 Answers1