Webfonts

Ayer fue un día muy emocionante para todo lo que tiene que ver con diseño web.

En su conferencia para desarrolladores Google presentó un sistema de incrustación de tipografía en una página. En realidad se trata de @font-face solo que servido a traves de los servidores de google.

Google lo ha hecho muy fácil para los diseñadores, apenas hay que añadir una línea para ligar una hoja de estilos desde sus servidores para poder usar lo básico:

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

Google se encarga de ver que navegador está pidiendo el estilo y manda el archivo apropiado para cada uno. No tienes que preocuparte por nada más para poder usar tipografía en cualquier navegador moderno, incluso IE6.

Si quieres más control hay un montón de funcionalidad que puedes usar con javascript a través de WebFont Loader, que es una biblioteca de funciones con el que puedes cargar la tipografía y controlar como, donde y cuando se muestran.

No es la primera vez que se hace esto y apenas es una versión beta. Se puede decir que Font Squirrel y Typekit hacen lo mismo y mejor. Font Squirrel inlcuso tiene un generador que permite usar una gran variedad de tipografías. De hecho, en esta comparación puedes ver como en general los otros dos servicios se ven mejor.

Una de las desventajas del sistema de Google es que no es posible visualizarlas en iPad o iPhone por el momento. Pero conociendo a Google es seguro que este servicio será mejorado continuamente, agregarán tipografía y funciones. En cosa de unos meses puede haber cambiado enormemente.

Las tipografías disponibles son pocas, limitadas necesariamente por tener que ser de uso libre, pero han hecho una buena selección. No sería extraño que Google estuviera en pláticas con algunas fundidoras tipográficas o diseñadores para licenciar o crear nuevos tipos.

Seguro habrá una gran adopción en la inmensa cantidad de diseñadores y desarrolladores que no han querido usar un método como Cufon o sIFR, aunque el segundo por lo menos tiene las ventajas de poder usar cualquier tipografía sin problemas de licencias.

Genera tu tipografía para web con la ardilla tipográfica

Desde hace un rato que se pueden incrustar tipografías en sitios usando @font-face de manera que no es necesario tener que conformarse con las pocas familias que se consideran “seguras” para crear un sitio. Pero sigue habiendo algunas dificultades, por ejemplo, Internet Explorer usa el formato eot mientras otros navegadores usan ttf. Esto quiere decir que necesitas ambos formatos para asegurarse que todos los visitantes puedan ver la tipografía que elegiste y además hace la creación de la hoja de estilos algo más complicado.

La Ardilla Tipográfica viene al rescate con un Generador que te permite subir la tipografía que tengas en tu computadora y te devuelve los archivos que necesitas, incluyendo el css para poder usarlo en el sitio.

El generador de tipografías de la Ardilla Tipográfica.

Recuerda que no todas las licencias de tipografía amaparan el uso para internet, así que asegúrate que lo puedes hacer.

La mejor manera de usar @font-face

I’ll circle back to why this is the best possible solution but let’s first review the other techniques’ weaknesses. Of course, the problem at the center of this is that IE needs an .eot font, and the other browsers must take a .ttf or .otf. Bulletproof @font-face syntax « Paul Irish

Ya para ahora todos sabemos que ahora que Firefox sacó su versión 3.5 y Opera su versión 10, se puede decir que la gran mayoría de los navegadores actuales pueden usar @font-face en css para usar cualquier (o casi) tipografía y no sólo las que los visitantes tengan en sus computadoras.

Sin embargo, hay un problema. Internet Explorer usa un formato de archivo diferente y por tanto la declaración debe ser distinta. Paul Irish ha creado una declaración que funciona elegantemente en los navegadores sin tener que usar comentarios condicionales para IE.

La ardilla tipográfica: tipos para usar en web

Font Squirrel is your best resource for FREE, hand-picked, high-quality, commercial-use fonts. Even if that means we send you elsewhere to get them.Font Squirrel | Download Hundreds of Free @font-face Fonts

Ahora que todos los navegadores actualizados pueden hacer uso de @font-face para mostrar tipografías distintas a las de siempre el problema se ha vuelto encontrar archivos que podamos usar en nuestro sitio sin incurrir en violaciones de licencias. La ardilla tipográfica ha reunido una buena colección de tipografías que permiten su uso en la web y que puedes incluir ya mismo en tu sitio. El paquete de cada tipografía incluye el formato .eot compatible con Internet Explorer, lo cual es una gran ventaja.