Un poco de historia

Una de las deudas más grandes que ha arrastrado por años el HTML con el diseño son las pobres opciones que nos ha brindado en cuanto a tipografías. Si queríamos que nuestro diseño se viera más o menos igual para todos los usuarios, había que limitarse a unas cuantas fuentes que sabíamos que estaban instaladas en casi cualquier computadora.

Partiendo de esta gran necesidad, cuando se desarrolló la especificación de CSS2 (en el lejano año de 1998) se propuso la regla @font-face para utilizar cualquier fuente, mediante la descarga de un archivo. Los que se aplicaron primero fueron los de Microsoft, quienes lo implementaron desde el Internet Explorer 4, pero utilizando un formato propietario (EOT). Entre rollos de formato y cuestiones de copyright, la iniciativa quedó descartada en la especificación CSS2.1 y se fue al baúl de las buenas ideas por unos 10 añitos.

Hace un par de años volvió a la mesa de la W3C el asunto y en la especificación de CSS3 se volvió a incorporar. A estas alturas ya ha sido implementado en casi todos los navegadores modernos, dando soporte a formatos populares como el TTF y OTF. Por su parte IE sigue soportando exclusivamente el formato EOT.

Durante estos largos 10 años han surgido ingeniosas técnicas para utilizar tipografías bonitas (aunque fuera en sólo los títulos), ya fuera utilizando Flash (sIFR), Canvas/VML (Cufón), la librería GD de PHP (FLIR), etc. así como sistemas de detección de fuentes instaladas entre otros muchos inventos que han funcionado más o menos bien, pero que finalmente no dejan de ser artimañas y trucos para solucionar una deficiencia.

La promesa

Ahora que @font-face vuelve a figurar dentro del estándar de CSS, resurge la promesa de poder usar la fuente que nosotros queramos para cualquier texto de una página web, de una forma sencilla y directa:

@font-face{
font-family:'Mi fuente embebida';
src: url('../fonts/mifuenteembebida.otf')   format('opentype');
}

y luego

.miselector {
font-family: "Mi fuente embebida";
}

Pero… ¿funciona?

Sí… más o menos. Hay varios detalles que hay que tener presentes si queremos implementar exitosamente esta técnica.

1. El soporte y compatibilidad.

La mayoría de navegadores modernos soportan tanto el formato TTF como el OTF (y en algunas pruebas que hice obtuve mejor calidad convirtiendo a OTF). Sin embargo, parece que el Safari para iPhone sólo acepta el formato SVG (que de acuerdo a mis pruebas tiende a producir archivos muy grandes). Y queda el Internet Explorer que necesita que le generemos un archivo en formato EOT. Aquí una tabla de compatibilidad.

2. Inconsistencias.

La manera como los distintos navegadores renderean las fuentes embebidas no es totalmente homogénea ni exactamente igual a si la fuente estuviera instalada en la computadora. Algunos harán las letras más gruesas, más delgadas, más pixeleadas, etc.

3. Peso.

Recuerda que el que una fuente sea embebida significa que tiene que descargarse para poder ser utilizada. Una fuente con trazos sencillos como la Helvetica puede que nos ocupe unos 20kB, pero una con trazos ligeramente más elaborados, como la Candara ¡viene pesando unas 10 veces más! Ah, y no hay que olvidar que si queremos utilizar negritas, cursivas y negritas-cursivas hay que incrustar también los archivos correspondientes a esas variantes de estilo. De esta manera, si quisiéramos incrustar Candara en sus 3 variantes básicas ya estaríamos hablando de unos 700kB (en formato OTF).

4. Retraso.

Las fuentes embebidas no siempre se mostrarán inmediatamente. Según el navegador y si han sido cargadas en cache o no, puede tardar unos momentos en mostrarse el texto, o mostrarse primero con una fuente del sistema, en lo que se carga la fuente embebida.

5. Copyright.

Y vale la pena recordar que el asunto del Copyright aún no está resuelto y que (al menos en teoría) sólo deberíamos incrustar fuentes que tengan las licencias adecuadas

Ok, suficiente rollo… ¿cómo la uso entonces?

Bueno, realmente este artículo no es un tutorial, sino más bien es una presentación del @font-face, platicándote un poquillo de su importancia, sus peripecias, alternativas y algunos detalles que conviene tener presentes para que decidas si te conviene usarla o no para tus proyectos actuales. Así que cerraré con unos cuantos tips:

No olvides seguir usando tus listas de fuentes, para las definiciones de font-family. Es decir, poner al principio el nombre de tu fuente embebida y continuar con alternativas por si algo falla:

font-family: “Mi fuente embebida”, Verdana, Arial, Helvetica, sans-serif;

  • Compara calidad y peso entre las versiones TTF y OTF y si quieres que tu fuente se vea también en IE checa que no tengas problemas para convertir a EOT, ya que este sistema tiene mecanismos de control de derechos. Existen varias herramientas sencillas y gratuitas para convertir entre formatos de fuentes.
  • Checa qué variantes de la fuente (em, strong, em+strong)  estarás utilizando y asegúrate de incluir todas las necesarias (no más, no menos).
  • Si es importante la compatibilidad con iPhone y la fuente en SVG te queda demasiado pesada, podría valer la pena seguir considerando un método alternativo como los mencionados más arriba.
  • Checa si la fuente que quieres utilizar está instalada en la computadora del usuario, para evitar descargarla inútilmente.
  • Revisa “la técnica de la carita“, uno de los clásicos trucos que inventa la gente para evitar problemas de compatibilidad.
  • Si realmente quieres volverte experto en la materia, checa algunos de los links que por aquí dejé, o léete  este detallado tutorial.
  • Si prefieres simplificarte la vida un poco puedes dejar que la Google Font API haga la mayor parte del trabajo por ti. Es un servicio muy prometedor aunque a mi juicio tiene todavía problemas grandes en la calidad del rendereo de las fuentes. Eso sí, una diferencia de 1px puede hacer que tu texto se vea mucho mejor (o mucho peor). También puede interesarte Typekit , un servicio comercial que ofrece una librería muy extensa de fuentes por suscripción.
  • Lo más importante ¡experimenta y diviértete! Y si logras hacer un experimento asombroso ¡cómpartelo! @roccons