CODEWITHSUNDEEP
google-chrome-extensionfont-face
nick.skriabin
nick.skriabin

Reputation: 873

Chrome Extensions font-face mime-type

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.

Upvotes: 5

Views: 775

Answers (1)

Rob W
Rob W

Reputation: 349042

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

Upvotes: 1

Related Questions