Una alternativa accesible a cufón para la tipografía de tu web

Hoy en dia el uso de cufón para agregar tipografias a nuestra web se ha extendido mucho, la mayor parte de themes que encontramos para WordPress lo utilizan para dar un mejor aspecto a los títulos y encabezados.

Para el que no lo sepa, cufón es un sistema de reemplazo de fuentes, que nos permite ofrecer una tipografia en la web sin necesidad de que el visitante la tenga instalada en su equipo, para ello, usa javascript y renderiza la tipografía para el navegador, si usamos IE, nos mostrará capas VML, y si nuestro navegador soporta html5, utilizará la etiqueta <canvas>.

La técnica en si es de lo mas sencilla de usar, tan solo tendremos que incluir el archivo javascript canvas-yui y luego generar otro javascript con la utilidad web de cufón, en la que subiremos los archivos TTF de la tipografía que queremos generar (a ser posible en todos los formatos: regular, negrita, cursiva y negrita-cursiva), indicaremos un nombre para nuestra fuente y la web nos ofrecerá el archivo para descargar que tendremos que incluir en la cabecera.

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/WalkWaySemiBold_400.font.js"></script>

Para mi, uno de los problemas de este sistema, es que no es ni estándar ni accesible, además, no podremos seleccionar la fuente que veremos en la web, ya que nos aparecerá como una imagen.

Para solucionar estos problemas de accesibilidad, ha nacido una alternativa basada en CSS3, que hace exactamente lo mismo siendo accesible, y permitiendo seleccionar el texto que vemos en pantalla, simplemente usando declaraciones @font-face.

¿Y como funciona? es mas sencillo aún que utilizar cufón, hay multiples alternativas (generadores, hosted webfonts…) yo he optado por utilizar un generador de webfonts que se llama fontsquirrel.

Una vez estamos en su generador, tan solo tenemos que subir los TTF igual que hacemos para cufón, y el sistema nos descargará los archivos necesarios para nuestra web, y el código que tendremos que colocar en nuestra hoja de estilos, en mi caso, subi la fuente WalkWaySemiBoldRegular, el código que he tenido que agregar es este:

@font-face {
    font-family: 'WalkwaySemiBoldRegular';
    src: url('css/walkway_semibold-webfont.eot');
    src: url('css/walkway_semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/walkway_semibold-webfont.woff') format('woff'),
         url('css/walkway_semibold-webfont.ttf') format('truetype'),
         url('css/walkway_semibold-webfont.svg#WalkwaySemiBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

El resultado funciona en estos navegadores: Safari 5.03, IE 6-9, Firefox 3.6-4, Chrome 8, iOS 3.2-4.2, Android 2.2-2.3, Opera 11

Podeis ver el resultado en nuestra web, todos los encabezados y títulos de esta página se renderizan con CSS accesible, sin javascript y sin usar canvas o VML.