html - ttf - @ font-face url apuntando a archivo local

font face sass

Question

Necesito incluir una fuente (OpenSymbol) en un archivo html y el archivo de la fuente está en una carpeta local (sé 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 no está instalada en el sistema operativo?

Editar:

¡Descubrí que la lista de diferentes URL parece no funcionar! Chrome carga la fuente si puse la [...].ttf URL [...].ttf 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 ... oO

Por cierto, Firefox tiene problemas debido a problemas de seguridad: vea aquí

Answer 1

De acuerdo con una página de fuentes de muestra de Font Squirrel, tanto IE 9 como Firefox requieren que los archivos de fuentes se sirvan desde el mismo dominio que la página en la que están cargados. Entonces, con @ font-face, su única opción es encontrar el (los) archivo (s) de fuente que está tratando de usar y subirlos al sitio, y luego usar un código similar al siguiente:

@font-face {
font-family: ''MyWebFont'';
src: url(''webfont.eot''); /* IE9 Compat Modes */
src: url(''webfont.eot?#iefix'') format(''embedded-opentype''), /* IE6-IE8 */
     url(''webfont.woff'') format(''woff''), /* Modern Browsers */
     url(''webfont.ttf'')  format(''truetype''), /* Safari, Android, iOS */
     url(''webfont.svg#svgFontName'') format(''svg''); /* Legacy iOS */
}

Tomado de http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

EDITAR: Una cosa más de la página de Font Squirrel, si está utilizando un servidor IIS, los tipos de archivos deben agregarse a la lista de tipos MIME.

Answer 2

Puede ser que el navegador simplemente no admita el archivo .ttf. Considere trabajar con fontsquirrel , generará todos los archivos requeridos (.ttf, .woff, .svg, .eot) y css para usted, y funciona en todos los navegadores. Lo uso todo el tiempo...

Answer 3

Solo necesita un archivo de fuente en formato de fuente abierta web. Vaya a http://www.fontconverter.org para convertir su OpenSymbol.tff to OpenSymbol.woff . Soy un desarrollador multiplataforma y probé que esto funciona bien en:

1. Safari 10.1 y Firefox 52.0.2 en macOS 10.12.4 (iMac)
2. Internet Explorer 11.0 y Firefox 52.0.1 y Google Chrome 52.0 y Opera 53.0 en Windows 7 (PC)
3. Safari en iOS 10.3.1 (iPhone)
4. Chrome 57.0 y Asus Browser 2.0.3 en Android 5.0.2 (tableta Asus)

Esto va en el css:

/* Add the decaration on top */
@font-face { 
font-family: ''OpenSymbol'';
src: url(''font/OpenSymbol.woff'') format(''woff'');
}
/* in separate css .elements or even the whole body, edit your font properties */ 
body {
font-family: OpenSymbol;
font-weight: normal;
font-style: normal;
..

No es necesario molestarse con los archivos de fuente OpenType (EOT) incrustados, ya que solo son necesarios para IE9 (2011) e IE10 (2012). No es necesario molestarse con las fuentes de gráficos vectoriales escalables (SVG), ya que ya no son necesarias desde iOS 5.0

Ya desde 2012 Web Open Font Format (WOFF) es totalmente compatible con todos los navegadores conocidos. Las fuentes TrueType (TTF) se usan localmente en iMac y PC, y también se pueden usar localmente en Android y iPhone. Es por eso que los desarrolladores web a menudo cometen este error, utilizando TTF en lugar de WOFF para un sitio.