Afortunadamente cada vez existe mayor libertad a la hora de diseñar una web. Hasta hace poco sólo podíamos utilizar las fuentes de sistema, las «arial, verdana,times,…». El uso de una fuente fuera de este grupo podía suponer una catástrofe visual si el usuario que entraba a ver la web no tenía instalada dicha fuente en su máquina. Existía la posibilidad de «hacer trampa» con flash o con imágenes, pero los inconvenientes eran tantos que salvo contadas ocasiones, no merecía la pena contemplarlo.
Ahora como sabeis, existen varias formas de utilizar cualquier fuente en vuestros sitios, @font-face rule, Tipekit, Fonts.com Web Fonts, Fontdeck, Webtype, WebINK,… Hoy sin embargo vamos a ver sólo Google Web Fonts, veremos las mejores fuentes que nos ofrece, sus ventajas e inconvenientes.
Google Web Fonts
Antes que nada, es importante resaltar que Web Fonts puede producir algún error de visualización en el rendering del Windows XP o en algún antiguo navegador, por lo que es importante saber qué fuentes son las que mayor compatibilidad tienen con los diferentes dispositivos, navegadores y sistemas operativos de nuestros usuarios.
La elección de una fuente a la hora de comenzar un diseño web es sumamente importante, la fuente nos marcará el ritmo de lectura del usuario, sólo por este aspecto, ya merece la pena tener cuidado al utilizar una u otra.
Google Web Fonts es un sistema que nos permite utilizar las diferentes fuentes alojadas en sus servidores. En la actualidad (a fecha de hoy), cuenta con 573 familias diferentes listas para integrarlas en tu sitio web.
Ventajas de utilizar Google Web Fonts
- Muy fácil de implementar.
- Se puede utilizar para cualquier etiqueta de texto (títulos, menús,…)
- El texto generado es igual que los ya conocidos, se puede seleccionar, copiar y es visible para el SEO de la página.
- No es necesario tener una cuenta Google para poder utilizarlo y no tiene límite de tráfico.
Inconvenientes de utilizar Google Web Fonts
- Al menos la primera vez que visitamos la web, hay que hacer una llamada al servidor de Google para cargar la fuente, esto puede retardar ligeramente la navegación, por lo que no es recomendable utilizar muchos tipos de fuente. Tampoco es necesario cargar una familia entera si no la vamos a utilizar por completo. Google Web Fonts tiene un «chivato» que nos dice si las fuentes seleccionadas están dentro o fuera de un tiempo prudente de carga.
Implementación de Google Web Fonts
Utilizar GWF es muy sencillo, enumeremos los pasos:
- Entramos en http://www.google.com/webfonts y elegimos la fuente que vamos a utilizar.
- Copiar el código generado dentro de la etiqueta <head> de nuestra página.
<link href='http://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet' type='text/css'>
- Utilizar la fuente como si de otra normal se tratase:
body { font-family: "Tangerine", serif; font-size: 48px; }
Trackbacks/Pingbacks