Google Font API: letras lindas para la Web... fácil

Uno de los problemas que enfrentamos los que hacemos sitios webs es la limitante que presenta la diversidad de equipos, softwares y sistemas operativos que utilizan los visitantes al caer en nuestro sitio.

No puedes esperar que todos vayan a ver lo que diseñaste exactamente igual en cada navegador que existe, ni en cada equipo con distintos sistemas operativos. Porque aunque sea el mas usado, no puedes asumir que todos estaran utilizando Windows con Internet Explorer. No puedes. A menos que seas del Gobierno de Chile y te importe una raja diseñar como la gente y que tu sitio funcione bien en otras combinaciones de computadores/software.

Un detalle particular respecto al diseño de sitios web, es el uso de Fuentes/Tipografia distintas. Generalmente, cuando ya has aprendido suficiente, terminas sabiendo que la cantidad de fuentes disponibles para presentar texto en una pagina web, es muy poca. Segun FontTester.com, las fuentes seguras para web no son mas de veintiuna. Seguras, en el sentido de que el 99% de los usuarios que veran tu pagina probablemente tiene esas fuentes instaladas en su Computador, no importando la combinacion de hardware/software que utilicen.

Para poder utilizar otras fuentes, tenias que recurrir a trucos que por si solos (cada uno) tenian carencias versus el utilizar una fuente de las seguras.

Podias claro poner un titular como imagen, y en esa imagen escribir en photoshop lo que querias poner, con la tipografia que se te diera la gana, colores, sombras, etc. Pero, ¿como automatizas eso?. Aquel texto sera fijo, puesto que es una imagen. No puedes hacer que tu sistema de contenidos genere una imagen usando photoshop. Aquel nivel de IA aun no existe.

Podias entonces utilizar algun script en tu servidor, abusando de PHP y su libreria GD2 o ImageMagick, para que de alguna forma pudieses automatizar el proceso de generar una imagen con alguna fuente ttf en tu servidor. Un script.php al cual le pasas el texto como query, o al que invocas con javascript a traves de algun selector segun la ID o class en el CSS, que se yo. El pero es que abusas de tu servidor. Claro, puedes "cachear" la imagen generada, para que solo haga el trabajo una sola vez, o una vez cada X minutos, pero... no es una solucion sencilla, y sigue siendo lento (si se trata de un sitio masivo) versus el mostrar solo texto plano. El otro pero es que, al igual que cualquier imagen, impides que el usuario pueda copiar-pegar tu texto en otro lado.

Podias abusar de flash, y de forma similar al ejemplo anterior, pasar todo el texto a un .swf que automaticamente transforme el texto a uno precioso. Esto es un poco mas rapido para tu servidor. No lo usas, el flash se ejecuta en el lado del cliente. El pero es aquel: flash ES pesado, y consume mucha CPU para generar lo que muestra en pantalla. Usuarios con PCs no tan poderosos, o equipos moviles, netbooks, notarian cierto lag (retraso) cuando navegan tu sitio web. Tampoco es una solucion sencilla. Tienes que saber de flash para programar el swf que va a transformar el texto a un flash con una fuente a tu gusto. Sin contar lo mierda que son los equipos de Apple portables (ipod, iphone, ipad, icuantahuevadamas), y lo mierda que es la gente que los sigue comprando devotamente aun cuando no son capaces de mostrar flash, entre muchas otras cosas que no son capaces de hacer. Aquella devocion imbecil a Apple, es tema para otro articulo en todo caso.

Podias abusar de javascript. Es lo mas cool hoy en dia. Es parte de la web 2.0, y aun cuando te dicen como desarrollador que no esperes que todos tengan javascript habilitado, y que debes hacer un fall-back para cuando un usuario no tenga javascript habilitado, la verdad es que son tan pocos que es totalmente sano ignorarlos, tal como ignoras a tu madre cuando la tienes al telefono. Tampoco es una solucion sencilla. Deja cabos sueltos tambien, como el no poder copiar-pegar el texto que conviertes a una fuente lindas, o el delay que hay por tener que esperar a que cargue todo el contenido de la pagina antes de poder convertir el texto a fuentes lindas.

TypeKit es un sitio que venia ofreciendo esta solucion javascript hace tiempo. El gran pero: es pagado. Mi alma de Sparrow informatico y mi religion (una propia, inventada y profesada por mi) me impiden gastar dinero en este tipo de soluciones.

Google al rescate.

Aqui viene lo util del articulo. Google, en su conferencia Google I/O de este 2010, presento varios chiches. El inutil Google Wave se hizo publico, anunciaron que su codec de video VP8 se vuelve abierto (y si que se nota la diferencia en los videos en la web ahora), mostraron su futura WebApps Store para conglomerar todas las "apps" web que existen (incluidas las que vendran gracias a WebGL), y algunas otras porquerias mas que no vi o no he leido en detalle aun.

Pero tambien, y he aqui lo que quiero comentarles, anuncio su alianza con TypeKit para lanzar Google Fonts API.

¿Que es esto?.

No es mas que la version ultra avanzada de TypeKit, pero... sin utilizar javascript. Todo el trabajo pesado lo hacen los servers de Google. Y es tan sencillo que sirve para cualquier sitio web, sin utilizar javascript (como dije antes), sin utilizar algun script en tu servidor, sin utilizar flash, dejando la opcion de poder copiar-pegar el texto convertido, y en general... si no te espanta lo Satanico que se ha vuelto Google en Internet, las conspiraciones y la dominacion digital mundial que lograran asi como van... entregandonos una solucion total, sin ningun pero en lo absoluto.

Para usar la fuente Tangerine en tu pagina, es tan simple como cargar esto en el <head> de tu sitio web:

[code] <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> [/code]

Y luego utilizar la fuente solicitada a Google en tu CSS, asi:

[code] .textolindo { font-family: 'Tangerine', serif; } [/code]

Como dijo Wall-E: ¡Taraaan!.

Aqui tienes instrucciones mas detalladas de como utilizar Google Fonts API.

¡Ah!, y funciona en Internet Explorer. Sin siquiera utilizar Javascript. Plus-es enormes.

Por el momento tienes estas fuentes disponibles desde Google Fonts API. No se si vendran mas pronto. Es probable que por la alianza con TypeKit, no veamos mas que esas fuentes en un tiempo. Quizas me equivoque, y Google termine comprando TypeKit y liberando todas las fuentes de este ultimo al publico, a traves de su Google Fonts API. No lo se.

Pero asi como esta, con las pocas fuentes que tiene, y la sencillez en su implementacion, es una excelente herramienta para nosotros, los maestros de la web.