@font-face o bye bye arial, times, comic sans…

Ya no hay excusa. Se acabó el ver siempre los mismos tipos de letra en las webs, se acabó la hegemonía de la Times New Roman, Helvética, Arial, Trebuchet, Comic Sans… Las nuevas especificaciones de CSS3 nos traen la propiedad @font-face, gracias a la cual los diseñadores web podemos utilizar cualquier fuente tipográfica en nuestros proyectos sin miedo a que los navegadores de los usuarios nos cambien el tipo de letra por las buenas.

Para usar cualquier tipo de letra solo necesitamos en principio dos cosas:

– Una hoja de estilos css que incluya la propiedad @font-face especificando la fuente que queremos utilizar

La propiedad @font-face la especificamos así:

@font-face 
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf');
}

Con la propiedad font-family: creamos y damos nombre a la fuente que queremos crear. Este nombre será el que utilicemos posteriormente para aplicar la tipografía a los elementos HTML de nuestra página y puede ser cualquier nombre.

Con src: indicamos la ruta en la que se encuentra el archivo de tipo de letra (en el ejemplo un archivo True Type, ttf), imprescindible para que el navegador del usuario que visita nuestra página pueda descargárselo y visualizar el contenido con esa fuente.

– El archivo de tipo de letra que queremos utilizar.

Aquí es donde vienen los problemas. Como suele suceder en todo lo relacionado con tecnología en la web, cada navegador (chrome, explorer, firefox, safari…) hace la guerra por su cuenta y deciden que cada uno va a utilizar un formato de archivo de fuente distinto. Lo que en teoría es sencillo, se complica al tener que obtener versiones distintas de la misma tipografía. Los formatos que debemos usar para asegurarnos compatibilidad total son los siguientes:

WEB OPEN FONT FORMAT (WOFF): Un formato empaquetado de True Type u Open Type, específico para uso en la web

TRUE TYPE (TTF) y OPEN TYPE (OTF): Soportados por Chrome, Firefox y Safari

EMBEDDED OPEN TYPE (EOT): Para nuestro querido amigo Internet Explorer

STANDARD VECTOR GRAPHICS (SVG): Para la versión de Safari para Iphone

Si conseguimos nuestra tipografía en todos los formatos, el código nos quedaría de la siguiente manera:

@font-face {
 font-family: 'dosisbook';
 src: url('dosis-book-webfont.eot');
 src: url('dosis-book-webfont.eot?#iefix') format('embedded-opentype'),
 url('dosis-book-webfont.woff') format('woff'),
 url('dosis-book-webfont.ttf') format('truetype'),
 url('dosis-book-webfont.svg#dosisbook') format('svg');
}

Como veis en el código CSS implementamos una única tipografía pero tenemos que enlazar a 4 formatos distintos de archivo para que cada navegador utilice el que soporta, vamos un follón.

Para facilitaros las cosas os damos dos alternativas estupendas y extremadamente sencillas para implementar cualquier tipografía en vuestros proyectos web con CSS3 y @font-face sin que os volváis locos.

1.- GOOGLE  WEBFONTS: Como no, nuestro salvador ha creado un site especialmente dedicado a tipografías para la web. Google Webfonts tiene una colección de fuentes (a día de hoy 613 familias), gratuitas y listas para usar directamente desde sus servidores. Es tan sencillo como elegir la fuente que más nos gusta, seleccionar los estilos disponibles de esa fuente y copiar y pegar el código css que nos facilita Google Webfonts en nuestro archivo css. Lo mejor es que no tenemos que crear ni guardar ningún archivo de tipo de letra porque los usamos directamente desde los servidores de Google.

2.- FONTSQUIRREL: ¿Y qué pasa si Google no tiene la fuente que quiero utilizar? ¿Cómo obtenemos los archivos woff, svg, eot… si solo tengo un miserable ttf u otf? La respuesta es fontsquirrel.  Se trata de una pequeña aplicación gratuita que podéis usar desde el navegador y que genera lo que ellos llaman font-kits, o sea, un archivo zip con todo lo que necesitáis para implementar vuestra tipografía. Solo tenemos que coger nuestro archivo Open Type, subirlo a fontsquirrel, esperar a que se genere el font-kit y descargarlo cuando este listo. Dentro del archivo zip os encontraréis vuestra fuente en ttf, woff, svg y eot, un archivo HTML con una muestra de como queda vuestra fuente y las instrucciones y código CSS para usar en vuestra web. Tan solo nos queda copiar y pegar el código en nuestro CSS y subirlo todo a nuestro servidor, fuentes incluidas por supuesto.

Ya no tienes excusa para seguir utilizando las mismas fuentes en tus proyectos. Prueba estas herramientas y dale un toque distinto y personal al texto de tus páginas. Y si te surgen dudas o tienes problemas ya sabes, coméntanoslo en el blog o a través de Facebook o Twitter.

Nos vemos en Nowe!