Uso de fuentes .otf en navegadores web

440

Estoy trabajando en un sitio web que requiere pruebas de fuentes en línea, las fuentes que tengo son todas .otf

¿Hay alguna manera de incrustar las fuentes y hacer que funcionen en todos los navegadores?

Si no, ¿qué otras alternativas tengo?

html css fonts font-face Naruto
fuente
1
¿Quizás JavaScript debería eliminarse de la lista de etiquetas aquí?
kzh

Respuestas:

754

Puede implementar su OTFfuente usando @ font-face como:

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWeb.otf") format("opentype");
}

@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url("path/GraublauWebBold.otf") format("opentype");
}

Sin embargo, si quieres apoyar una amplia variedad de navegadores modernos , le recomendaría que para cambiar a WOFFy TTFtipos de fuentes. WOFFel tipo se implementa en todos los principales navegadores de escritorio, mientras que el TTFtipo es una alternativa para los navegadores Safari, Android e iOS más antiguos. Si su fuente es gratuita, puede convertirla utilizando, por ejemplo, un convertidor de fuente en línea .

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype");
}

Si desea admitir casi todos los navegadores que aún existen (ya no es necesario en mi humilde opinión), debe agregar algunos tipos de fuentes más como:

@font-face {
    font-family: GraublauWeb;
    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 */
}

Puede leer más sobre por qué se implementan todos estos tipos y sus pirateos aquí . Para obtener una vista detallada de qué tipos de archivos son compatibles con qué navegadores, consulte:

@ Soporte de navegador de font-face

Soporte del navegador EOT

Soporte de navegador WOFF

Soporte de navegador TTF

Soporte de navegador de fuentes SVG

espero que esto ayude

elegir
fuente
1
Funcionó perfectamente bien en casi todos los navegadores ... El único navegador que no funcionó es FireFox Linux ... ¿Alguna sugerencia para ese?
Naruto
3
Tenga en cuenta que si aloja esto en un servidor de Windows, debe agregar el tipo de archivo .otf como un tipo de archivo válido y servido. La única forma de ver que este es el problema es seguir el enlace a la fuente (error 404 si es así). Puede cambiar temporalmente el nombre a .ttf o incluso .html para realizar pruebas. Las únicas fuentes web compatibles con IE son el formato WOFF. (¡No, nunca he oído hablar de eso tampoco!)
Henrik Erlandsson
Oye, ¿qué tal el rendimiento de este tipo de fuente? ¿Esta bien? U otro es mejor?
Anggie Aziz
¿ "Faltan comillas ( ) en los ejemplos de código?
steffen
2
Parece que otf debería funcionar casi en todos los ámbitos ahora caniuse.com/#search=otf
Stephen
49

De los ejemplos del Directorio de fuentes de Google :

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
}

Esto funciona entre navegadores con .ttf, creo que puede funcionar con .otf. ( Wikipedia dice que .otf es mayormente compatible con .ttf) Si no, puede convertir el .otf a .ttf

Aquí hay algunos buenos sitios:

kzh
fuente