Fuentes con fuente

El problema de la tipografía en el diseño web es peculiar, una página web sólo se puede mostrar en fuentes que el usuario tenga instaladas en su ordenador, por lo tanto al diseñador se le escapa el control sobre lo que va a ver el usuario en su navegador. Para evitar sorpresas, todo el mundo utiliza familias de fuentes que más o menos se parecen y aún así es imposible estar seguro de nada, con la proliferación de GNU/Linux o MacOS —que tienen sus propias familias de fuentes— el tema es aún más complicado. La tipografía en Internet también es monótona, todos usamos las mismas fuentes una y otra vez. ¿Reemplazar texto con imágenes? Sí, pero anulando la accesibilidad y el indexado. ¿No hay solución? Sí, y una vez más de la mano de CSS.

La propiedad @font-face permite descargar una fuente al navegador en el caso de que el ordenador no la tenga instalada, tan simple como eso. La sintáxis lo dice todo:

@font-face {
        font-family: "Kill Comic Sans";
        src: url("http://bancomicsans.com/");
        }

Luego, solo tendríamos que definir esa fuente en algún elemento de la página:

blockquote {
        font-family: "Kill Comic Sans";
        }

Parece fácil, pero como todo lo que está relacionado con el mundo de los navegadores, viene con un pero. Ningún navegador se ha dignado a implementar la función todavía, uno se podría preguntar si es una nueva especificación del W3C, pero no, esta propiedad está recogida en el CSS 2, que data de 1998. Después de casi 10 años en la inopia por fin un motor empieza a introducir la propiedad tímidamente, no es otro que WebKit, el motor Open Source de Safari. Quizá en las próximas versiones de Safari se convierta en una realidad, nunca se sabe, y quizá Gecko (Mozilla y derivados) y Presto (Opera) se suban al carro, sería lo más deseable. De Trident (Internet Explorer) no me espero nada.

Como todas las herramientas, ésta propiedad es un arma de doble filo. Para el diseñador es una ayuda inestimable, que nutre la creatividad y permite diseños más personales y audaces. Para los que creían que la etiqueta <blink> era maravillosa, se les abre un nuevo mundo de posibilidades en la ilegibilidad y el mal gusto.