@ font-face url apuntando a archivo local
Necesito incluir una fuente (OpenSymbol) en un archivo html y el archivo de la fuente está en una carpeta local (conozco la ruta absoluta absoluta a la misma). Si uso @ font-face de esta manera:
@font-face {
font-family: "OpenSymbol";
src: url("<absolutePath>/OpenSymbol.ttf") format("truetype");
}
Funciona en Chrome, Opera y Safari, pero no en Firefox ni en IE9. Otro uso de @ font-face funciona perfectamente bien en todos los navegadores.
Por cierto, en Chrome, recibo una advertencia:
Resource interpreted as Font but transferred with MIME type application/octet-stream
¿Qué puedo hacer para incluir limpiamente una fuente almacenada localmente que esno instalado en el sistema operativo?
Editar:
¡Descubrí que la lista de diferentes URL parece no funcionar! Chrome carga la fuente si pongo el[...].ttf
Url en primer lugar, pero no si está en otro lugar!
2ª Edición:
Lo tengo para funcionar en todos los navegadores excepto en 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;
}
...
y entonces
.element {
font-family: OpenType, OpenTypeEOT, [...];
}
De todos modos, funciona en IE pero no en eclipse, que usa el motor de renderizado de IE ... o.O
Por cierto, Firefox tiene problemas debido a problemas de seguridad:Mira aquí