Utilizando CSS3 hoy (5): @font-face

Una de las grandes limitaciones actuales en el diseño y desarrollo web es la limitada lista de fuentes que se pueden utilizar de forma segura Con “forma segura” entendemos que la fuente que hemos escogido esté instalada en todos (o la mayoría) de los ordenadores de los usuarios que van a entrar en nuestra web. Hay muy pocas fuentes que sean “seguras”. Quizás las fuentes seguras más conocidas sean Arial y Verdana. (Ver lista de fuentes seguras).

Se han desarrollado distintas soluciones para poder utilizar cualquier fuente “no segura”, ya sea utilizando Flash (sIFR), o Javascript (Cufón). Pero el futuro está en CSS3 y su declaración @font-face.

Para ver cómo funciona lo mejor es poner un ejemplo.

Vamos a comenzar por escoger una fuente gratuita. He seleccionado Cookies (http://www.dafont.com/cookies.font).

Lo primero que haremos en nuestra hoja de estilos es crear una declaración que defina la fuente que vamos a utilizar:

Si la fuente en vez de ser TrueType (.ttf) fuera OpenType (.otf), pondríamos “opentype” en vez de “truetype”.

Con esta declaración conseguimos dos cosas: en primer lugar damos un nombre a la fuente que vamos a utilizar (en este caso cookies), en segundo lugar asociamos ese nombre al enlace directo de la fuente que vamos a utilizar bajo ese nombre (en este caso la fuente cookies que se encuentra en formato truetype dentro del directorio fuentes).

Ahora que ya hemos definido la fuente podremos utilizarla como cualquier otra fuente en nuestra hoja de estilos:

Veámoslo en un ejemplo (ojo: sólo lo veremos bien en Safari 3.1+, Firefox 3.5+, Chrome y Opera 10. ¿Internet Explorer? En seguida veremos cómo hacerlo): Ver demo de utilización de @font-face. Podéis descargar el código aquí: Descargar Demo 1

Hasta aquí todo muy fácil. Sin embargo hay dos problemas:

1) El problema legal. Hay muchas fuentes (especialmente las comerciales) que no permiten que se las use utilizando @font-face. La razón probablemente sea que entonces serían muy fácilmente pirateables. Hay que tener por lo tanto mucho cuidado con las fuentes que se utilizan. Lo primero que hay que leer es su documento de licencia (incluso si son fuentes gratuitas) y ver si permiten su uso mediante font-face, y si lo permiten ver bajo qué condiciones (en ocasiones sólo hay que hay que hacer una mención a la fuente y a su autor en la hoja de estilos, por ejemplo).

Hay algunos sitios muy útiles que nos ofrecen fuentes gratuitas señalando incluso cuales se pueden utilizar con @font-face, como Font Squirrel, Kernest o Webfonts.

2) El problema de la compatibilidad. Hemos hablado hasta ahora que @font-face es sólo compatible con Safari, Chrome, Firefox y Opera. Pero, ¿qué pasa con Internet Explorer? Pues resulta que @font-face lo soporta Internet Explorer desde su versión 4. Sorprendente ¿verdad? El único problema reside en que Internet Explorer, de momento, sólo soporta un formato propietario de Microsoft llamado Embedded Open Type (.eot). Por ello necesitamos incluir dos ficheros si queremos que @font-face funcione en todos los navegadores: uno TrueType o OpenType para Safari, Chrome, Opera o Firefox y otro EOT para Microsoft Explorer.

No hay muchas fuentes disponibles en formato .eot de Microsoft. Hay una herramienta muy fácil de usar llamada ttf2 que convierte fuentes TrueType a EOT. Para convertir fuentes OpenType hay que convertirlas primero a TrueType (se puede hacer con FontForge).

De nuevo, hay sitios web como Font Squirrel que nos ofrecen ya fuentes gratuitas en formato EOT en lo que llaman @font-face kit (que incluye todos los formatos). Font Squirrel tiene incluso un generador de @font-face.

Vamos a ver un ejemplo utilizando una fuente en formato EOT. De Font Squirrel he bajado la fuente Cartoonish Hand, y de ella voy a usar dos ficheros que he grabado en la carpeta fuentes: SF_Cartoonist_Hand_SC.ttf y SF_Cartoonist_Hand_SC.eot

En la hoja de estilos haría esta vez:

Vemos que primero (y es importante el orden) hemos incluído el archivo con formato .eot para Internet Explorer y luego hemos incluido la declaración para el resto de los navegadores. Como novedad, hemos incluido “src: local(‘Cartoonist Hand’)” que busca primero si la fuente está instalada en el ordenador del usuario que abre la web. Si no es así la carga desde el servidor de la web (la siguiente línea).

Luego haríamos:

Podemos ver la demo aquí: Ver demo de @font-face con archivos .eot para Microsoft Explorer. Podéis bajar el código aquí: Descargar Demo 2

Por último es importante decir que si queremos utilizar distintas versiones de la misma fuente (su itálica o su negrita, por ejemplo) hay que cargar todos los archivos correspondientes, por ejemplo:

Como podéis ver el uso de @font-face es muy sencillo. Una vez se solucionen los problemas legales sobre su uso e Internet Explorer soporte TrueType y OpenType (que seguramente lo hará con Internet Explorer 9) @font-face solucionará el problema del uso de la fuente que deseemos en nuestra web. De todas formas, hay ya muchos sitios web que utilizan ya @font-face, que como habéis visto se puede usar con facilidad con fuentes gratuitas.

NOTA: En footspring ha aparecido un artículo imprescindible: Uso de @fontface a prueba de bombas. Para ser compatible con Android, con IE9, etc.. La sintaxis sería:

Más lecturas recomendadas

Emenia: Sintaxis de @font-face a prueba de bombas
Themeforest, How to achieve cross-browser @font-face support
Snook.ca, Becoming a Font Embedding Master
Paul Irish, Bulletproof @font-face syntax
User Agent Man, @font-face in Depth
AllCreatives.net, ofrece un sistema para mejorar cómo se ven las fuentes en IE7 e IE8 utilizando @font-face
spyrestudios, nos ofrece 21 fuentes disponibles para @font-face: 21 Awesome @font-face Embeddable Typefaces
Podemos ver más información sobre los navegadores que soportan @font-face en webfonts.
Font Squirrel, ofrece los kits ya completos de @font-face.

8 comentarios en “Utilizando CSS3 hoy (5): @font-face

  1. Heyyy amigo,  este es el articulo mas exelente que he encontrado sobre este tema, ya probe tus ejemplos y realize mis propios ejercicios y funciona perfectamente, gracias por compartir tu conocimiento…. buen día

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">