Cómo usar font-face en todos los navegadores y no morir al usarlo en IE

La semana me enfrenté quizá a uno de los problemas más frecuentes que se podrían encontrar en cuanto a compatibilidad con CSS3. Y es que al estar haciendo un sitio web me insistieron en que la tipografía debería ser Helvetica en todos los navegadores y SO, es decir, tenía que hacer que en Windows y Linux se viera la fuente, aún cuando el usuario no la tuviera instalada.

La solución fue usar font-face, la propiedad en CSS3 que nos permite usar fuentes externas para usarlas los sitios web, pero al ver que el resultado en IE no funcionaba me puse a investigar la forma más fácil de aplicar esta funcionalidad. Por eso el tutorial de hoy es ver cómo usar font-face en todos los navegadores y no morir al usarlo en IE, con tips y trucos que nos ayudarán a no perder tanto tiempo viendo por qué demonios no jala la fuente como debería.

Demo del tutorial

CSS

Este es el código para insertar una fuente con CSS. Lo primero que se declara es un nombre para la fuente, yo le puse “HelveticaN”. Ahora, lo que sigue es especificar la dirección de nuestra fuente, yo puse una dirección relativa pero ahí deberían cambiar a la suya.

Lo que sigue es un truco muy bien elaborado para que funcione con IE. Se pone primero una url con la fuente OET, y después se agrega así, literal, otra con una carita feliz para después seguir agregando las fuentes con las demás extensiones. La carita feliz la propuso Paul Irish, y en realidad es para mostrar cualquier símbolo de 2 bytes que no se pueda usar para darle un nombre de archivo en Mac y sirve para que no haya interferencia entre las fuentes que se tienen instaladas en el equipo y la que estás tratando de usar externamente.

Ya que nombramos nuestra fuente podemos usarla en cualquier estilo que queramos siempre que la definamos entre comillas.

¿Cómo obtengo todas las variaciones de la fuente?

Font2Web es el mejor sitio que encontré donde a partir de las fuentes .ttf o .otf que son las extensiones más comunes para instalar en las computadoras puedes obtener todas las demás de forma muy fácil. Después de descargar y descomprimir el archivo ya puedes copiar las fuentes a la carpeta de tu sitio y referenciarlas con CSS.

Problemas que encontré con IE

He revisado el código que les coloqué y no debería haber problema, de todas formas deben tener algunas consideraciones si hacen todo el proceso por sí solos. Por ejemplo, IE 8 e IE9 renderean diferente las fuentes, por lo que en IE8 pude renderear al principio pero en IE 9 no. En IE10 ya no hay ningún problema, de hecho se puede declarar una sola fuente y funciona perfectamente, pero para los demás IE hay que declarar todo el código de arriba.

Otro problema que me pasó fue que no importante lo que pusiera no renderaba la fuente en IE9, y fue porque la fuente estaba dañada, y aunque en los demás navegadores si servía en IE9 no porque elige las tipografías .woff por ejemplo o .eot, entonces, asegúrense que primero que la fuente no esté corrupta o algo por el estilo porque les causará muchos problemas si está dañada.