@font-face en CSS





 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.





También te podría gustar...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *