2

I get the following warning in Chrome dev tools about a base64 encoded font which is embedded in one of the CSS files in a site I'm working on.

Resource interpreted as Font but transferred with MIME type font/svg: "data:font/svg;charset=utf-8;base64,PD94bWwgd -- big base64 encoded string -- 2RlZnM+PC9zdmc+"

In the CSS, the font is inserted like this:

@font-face {
  font-family: 'PrintBelt';
  src: url('data:font/svg;charset=utf-8;base64,PD94bWwgd -- big base64 encoded string -- 2RlZnM+PC9zdmc+") format('svg'), url('data:font/ttf;charset=utf-8;base64,AAEAAAANAIAA -- other big base64 encoded string -- AAAAzLVVtw==') format('truetype');
}

I've searched around and found some blog posts and SO questions which aim to explain how to fix this problem. None of them seem to deal with fonts which are embedded in the CSS however.

  1. Proper mime type for fonts
  2. Ha! In your font-face

What can I change in either Rails (3.2.8) or the CSS in order to silence this warning?

Community
  • 1
  • 1
David Tuite
  • 22,258
  • 25
  • 106
  • 176

1 Answers1

0

The linked SO question says that there is no font/ major content type axis (there probably should be, but there isn't) and that the content type for SVG fonts is image/svg+xml; all that remains is to encode that correctly within the data: URL. That's very slightly tricky because you need a + in there after decoding, so you have to encode it (as a + is usually used as a token to stand in for a space):

data:image/svg%2Bxml;charset=utf-8;base64,PD94bWwgd...

Truetype fonts use the content type application/x-font-ttf, which is unproblematic.

Donal Fellows
  • 133,037
  • 18
  • 149
  • 215
  • 1
    Donal, doesn't seem to work I'm afraid. Now I just get a similar warning: `Resource interpreted as Font but transferred with MIME type image/svg%2bxml:`. Any other ideas? – David Tuite Nov 04 '12 at 01:14