La única solución técnicamente correcta desde el punto de vista de CSS es el uso de la directiva @font-face. Esta directiva se definió en el estándar CSS 2, pero desapareció en el estándar CSS 2.1. La versión de CSS 3 incluye la directiva @font-face en el módulo llamado Web Fonts (http://www.w3.org/TR/ css3-webfonts/) .
Yo para personalizar las fuentes en los diseños siempre utilizo google fonts, ya que es mas rápido y sencillo, pero nunca está de mas conocer como aplicat fuentes «extrañas» a textos con CSS.
La directiva @font-face permite describir las fuentes que utiliza una página web. Como parte de la descripción se puede indicar la dirección o URL desde la que el navegador se puede descargar la fuente utilizada si el usuario no dispone de ella. A continuación se muestra un ejemplo de uso de la directiva @font-face:
@font-face {
font-family: «Fuente muy rara»;
src: url(«http://www.ejemplo.com/fuentes/fuente_muy_rara.ttf»);
}
h1 {
font-family: «Fuente muy rara», sans-serif;
}
La directiva @font-face también permite definir otras propiedades de la fuente, como su formato, grosor y estilo. A continuación se muestran otros ejemplos:
@font-face {
font-family: Fontinsans;
src: url("fonts/Fontin_Sans_SC_45b.otf") format("opentype"); font-weight: bold;
font-style: italic;
}
@font-face {
font-family: Tagesschrift;
src: url("fonts/YanoneTagesschrift.ttf") format("truetype");
}
Los ejemplos anteriores han sido extraídos de la página 10 Great Free Fonts for @font-face embedding (http://opentype.info/demo/webfontdemo.html) . Para ver el efecto de la directiva
@font-face, debes acceder a esa página utilizando un navegador como Safari.
0 comentarios