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 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');
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With