unijimpe

Este artículo ya se encuentra obsoleto.
Para una referencia actual leer: Incluir fuentes en CSS con @font-face

@font-face es un propiedad de CSS disponible desde CSS2 y que la han incorporado los navegadores actuales (Firefox 3.5, Firefox 3.5, Chrome 4.0, Internet Explorer 5, Safari 3.1, Opera 10). De esta forma ya no estaremos restringidos a utilizar las fuentes clásicas en nuestras páginas y tampoco hace falta utilizar librerías javascript, flash o imágenes para obtener los mismos resultados.

Sintaxis Básica

El uso de esta propiedad es sencilla, para ello hay que definir un nombre y la ruta donde se encuentra el archivo de la fuente. Por ejemplo en el siguiente código vamos a utilizar la fuente helveticaneue_light.ttf la cual está ubicada en la carpeta fonts y que la nombramos como «HelveticaNeueLight» para utilizarlo posteriormente.

@font-face {
    font-family: 'HelveticaNeueLight';
    src: url('fonts/helveticaneue_light.ttf') format("truetype");
    font-style: normal;
    font-weight: normal;
}

Luego para utilizar esta fuente recién declarado lo hacemos mediante la propiedad font-family en donde le pasamos el nombre que hemos definido anteriormente.

h3 {
    font-family: 'HelveticaNeueLight';
    font-size: 18px;
    color: #F36;
}

Sintaxis Completa

Lamentablemente no todos los navegadores aceptan el mismo formato de archivo para las fuentes, por ello existe una sintaxis mas compleja la cual asegura mayor compatibilidad con los navegadores. En donde se requiere tener las fuentes en diferentes formatos: .eot, .woff, .ttf y .svg.

@font-face {
    font-family: 'HelveticaNeueLight';
    src: url('../fonts/helveticaneue_light.eot');
    src: url('../fonts/helveticaneue_light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/helveticaneue_light.woff') format('woff'),
         url('../fonts/helveticaneue_light.ttf') format('truetype'),
         url('../fonts/helveticaneue_light.svg#HelveticaNeueLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

Como convertir las fuentes

Si no tenemos las fuentes en todos los formatos antes mencionados, existe un servicio gratuito @font-face Generator que permite hacer la conversión a todos los formatos necesarios para la máxima compatibilidad.

Seleccionan la fuente y esta devolverá un archivo zip que contiene las fuentes en los formatos necesarios así como el código CSS necesario para colocarlo en nuestra hoja de estilos.

Como obtener las fuentes

La mayoría de las fuentes tienes derechos de autor asi que no las podremos utilizar a menos que tengamos la licencia de uso. Pero también existen fuentes gratuitas, para descargar estas fuentes existen dos páginas con gran variedad de tipografías.

• Font Squirrel: FREE fonts for graphic designers
• Google Web Fonts

Para finalizar les dejo los archivos fuente con un ejemplo de uso de fuentes utilizando @font-face.

[download id=»59″ autop=»false»]

Mas Información

• The New Bulletproof @Font-Face Syntax
• @font-face Generator
• MDN: @font-face

Posts Relacionados

• Google Font Library – Fuentes para tu Web
• CSS Reset
• AdSense de Google
• Facelift: Reemplaza texto por imagenes
• Hack CSS para IE6 & IE7