Hoy voy a hablar sobre el uso de fuentes embebidas con la propiedad CSS @font-face y los inconvenientes con los que nos podemos encontrar en la maquetación de una web si usamos esta propiedad.

Para aquellos que no lo sepan, con la propiedad CSS @font-face es posible utilizar fuentes en nuestros diseños sin necesidad de tenerlas instaladas en el equipo cliente. Hasta no hace tanto esto no era posible, y limitaba bastante el diseño web, por lo tanto, esta propiedad supone un gran avance.

Esta propiedad no es nueva, ya existía en la especificación de CSS 2, se eliminó en CSS 2.1 (que usaban la mayoría de los navegadores) y ha vuelto con CSS 3.

El uso no entraña demasiada complicación:

@font-face{
  font-family: "Nombre con el que queremos definir la fuente";
  src: url(lugar donde se encuentra);
}

Esta propiedad nos permite definir el formato de la fuente, por ejemplo si queremos la fuente en negrita y cursiva:

@font-face{
  font-family: "Nombre con el que queremos definir la fuente";
  src: url(lugar donde se encuentra);
  font-style: italic;
  font-weight: bold;
}

Una vez definida la fuente, ya podemos comenzar a usarla en nuestro diseño:

body{
  font-family: "Nombre con el que hemos definido nuestra fuente";
  font-size: 62.5%;
}

Como decía anteriormente, esto abre infinitas posibilidades para elaborar nuestros diseño.

El archivo de la fuente debe ser del tipo TrueType en la mayoría de los casos (Firefox, Chrome, Opera, Safari...). Estos archivos van acompañados de la extensión ttf. Para nuestro "amigo" Internet Explorer el proceso es algo más largo, ya que tendremos que transformar nuestra fuente en un archivo.eot. Para ello tenemos una gran variedad de aplicaciones online que nos ayudarán en esta tarea. Por ejemplo nos encontramos con http://www.kirsle.net/wizards/ttf2eot.cgi. Una vez realizado este proceso incluimos nuestra fuente en la carpeta correspondiente y por lo que he podido comprobar es recomendable declarar esta fuente antes que las demás. Por ejemplo:

@font-face{
  font-family: "nombre fuente para IE";
  src: url(fuente.eot);
}
@font-face{
  font-family: "nombre fuente para el resto";
  src: url(fuente.ttf);
}

Si tenemos pensado usar más de una fuente embebida en una web, debemos usar una directiva @font-face por cada fuente que vayamos a utilizar. Es similar al caso anterior.

Bien, hasta ahora no parece nada del otro mundo, esta propiedad me parece muy interesante por la posibilidad de usar dingbats en nuestros diseños. Para el que no lo sepa, los dingbats son fuentes no alfanuméricos. Son símbolos, lo cual abre aún más el abanico de posibilidades en nuestro diseño y repercute en el tamaño de nuestra web que reduciría el número de imágenes drásticamente. Podemos encontrar gran cantidad de estos en varias web, por ejemplo http://www.dingbatdepot.com/.

Inconvenientes en el uso de fuentes embebidas con la directiva @font-face.

Lamentablemente el uso de esta directiva nos puede crear muchos dolores de cabeza en navegadores de la familia Microsoft, como es Internet Explorer 6 y 7. También he comprobado que en Sistemas Operativos Windows XP, Vista y 7 (son los que he comprobado) también nos encontramos con algunos defectos no tan evidentes.

Si estamos pensando en usar esta propiedad en alguno de nuestros diseños, pero queremos que se muestre correctamente en la mayoría de los navegadores recomiendo pensarlo dos veces. En el caso de los dingbats los navegadores anteriormente citados (y algún otro desarrollado para la navegación móvil) no muestran todas las fuentes (supongo que porque no aceptan dicha directiva), por lo que en mi caso tuve que recurrir finalmente a imágenes.

Otro de los efectos negativos que descubrí al usar fuentes embebidas junto a los Sistemas Operativos de Windows fue la "pixelación" más que notable de la fuente. Esto es debido a ClearType, una opción que nos ofrecen estos S.O. para que nos muestre el texto suavizado, pero que destroza el visualizado de dichas fuentes en el navegador.

Si buscamos en internet encontraremos soluciones que en algunos casos pueden funcionar. El más repetido es el uso de:

h2{
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop); //solo para IE
}

Este filtro solo funciona en Internet Explorer, si usamos otro navegador distinto en Windows, y tenemos activado el ClearType la fuente se mostrará pixelada.

Tampoco es muy recomendable este método, ya que consume bastantes recursos (la página se hará más lenta), si estas usando una imagen de fondo con transparencia se mostrará mal y si haces zoom con el navegador el texto se mostrará con un borde negro. Lo podemos comprobar en un post del blog Versión texto.

Existen también soluciones basadas en JavaScript con el uso de la librería JQuery 1.4 como proponen en Critalab.

En este momento podemos pensar que es demasiado engorroso el uso de esta directiva, y puede que lo sea. Yo personalmente la he usado y mi solución fue usar para algunas versiones de Internet Explorer fuentes estandard que no rompieran el diseño. No usar dingbat, y revisar el diseño en varios Sistemas Operativos Windows con ClearType activado y desactivado para ver las diferencias, las cuales tampoco entrañaba un gran cambio.

Saludos y espero les sea de ayuda.