@font-face url pointing to local file

Viewed 66582

I need to include a font (OpenSymbol) in a html file and the font file is in a local folder (I know the exact absolute path to it). If I use @font-face like this:

@font-face {
  font-family: "OpenSymbol";
  src: url("<absolutePath>/OpenSymbol.ttf") format("truetype");
}

It works in Chrome, Opera and Safari, but not in Firefox neither IE9. Other @font-face usage works perfectly fine in all browsers.

Btw, in Chrome, I get a warning:

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

What can I do to cleanly include a locally stored font which is not installed on the OS?

Edit:

I found out that the listing of different urls seems not to work! Chrome loads the font if I put the [...].ttf url in the first place, but not if it's somewhere else!

2nd Edit:

I got it to work in all browsers except firefox:

@font-face { 
  font-family: 'OpenSymbol';
  src: url('file:<path>/openSymbol.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face { 
  font-family: 'OpenSymbolEOT';
  src: url('file:<path>/openSymbol.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
...

and then

.element {
  font-family: OpenType, OpenTypeEOT, [...];
}

Anyway, it does work in IE but not in eclipse, which uses IE's rendering engine... o.O

Btw, firefox has problems because of security issues: See here

3 Answers
Related