html - para - fuentes personalizadas css




Usando fuentes.otf en navegadores web (2)

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 en todos los navegadores con .ttf, creo que puede funcionar con .otf. ( Wikipedia dice .otf es mayormente compatible con .ttf) Si no, puedes onlinefontconverter .otf a .ttf

Aquí hay algunos buenos sitios:

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

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

Si no, ¿qué otras alternativas tengo?


Puedes implementar tu fuente OTF 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 desea admitir una amplia variedad de navegadores modernos, le recomendaría que cambie a los tipos de fuente WOFF y TTF . WOFF tipo WOFF se implementa en todos los navegadores de escritorio principales, mientras que el tipo TTF es una alternativa para los navegadores Safari, Android e iOS más antiguos. Si su fuente es libre, puede convertirla utilizando, por ejemplo, un convertidor de fuente en onlinefontconverter .

@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 (no es necesario, IMHO), 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 acerca de por qué se implementan todos estos tipos y sus trucos here . Para obtener una vista detallada de qué tipos de archivos son compatibles con los navegadores, consulte:

Soporte del navegador @ font-face

Soporte de navegador EOT

Soporte de navegador WOFF

Soporte de navegador TTF

Soporte SVG-Fonts Browser

espero que esto ayude





font-face