Como usar tipos de letra de calidad para tu página web

Durante mucho tiempo los desarrolladores estabamos limitados a usar un número muy reducido de tipos de letra en nuestras páginas web. Esto se debe a que los tipos de letra que podemos ver en nuestras computadoras dependen de que tengamos los archivos necesarios para representarlas en nuestro sistema operativo. Si usan Windows habrán visto que hay una carpeta llamada FONTS en la carpeta de sistema de su disco duro. El usuario promedio se conforma con los tipos de letra que vienen por defecto al instalar el sistema operativo y nunca le agrega tipos nuevos. Esto hacía que si usábamos un tipo de letra que el visitante a nuestra web no tenía en su sistema operativo entonces era reemplazado por el tipo de letra asignado por defecto. Lo malo era que el tipo de letra por defecto era muy feo y nuestra web terminaba viéndose muy mal.

Por esta razón había que ir a lo seguro y usar un tipo de letra que sabíamos que de todas maneras iba a estar presente en toda PC, es decir: Arial, Verdana, Comic Sans y Times New Roman. Pero esto ocasionó que durante mucho tiempo tuviéramos páginas muy uniformes y pobres en cuanto a tipografía. Desde hace un tiempo este panorama cambió con la aparición de formas para convertir nuestros Fonts a otros más sofisticados mediante el uso de técnicas que empleaban javascript o flash.

Desde mayo del 2010 Google puso a disposición de los desarrolladores un API que permite usar tipos de letra que se cargan desde los servidores de Google. Desde su aparición este servicio ha ido incrementando su listado de fuentes disponibles llegando a superar los 200 fonts entre los cuales podemos encontrar muchos de gran calidad y vistosidad.

La forma de incluirlos es muy sencilla y al estar alojados en los servidores de Google el tiempo de carga es muy rápido.

Primero deben dirigirse al siguiente enlace:
www.google.com/webfonts

Ahí podrán ver una pantalla como esta:


Como podrán ver en esa pantalla Google les permite recorrer su librería de Fonts e ir eligiendo las que deseen integrar a su Web. Los Fonts se muestran con una frase de muestra pero uds. Pueden elegir que el texto de muestra sea el nombre del tipo de letra, otra frase de prueba o pueden personalizar ese texto e ingresar el que deseen, asi:


Asimismo pueden indicar el tamaño en que quieren previsualizar las frases de muestra y ordenar los Fonts por orden alfabético, por la fecha en que fueron agregados, por el número de estilos que poseen, por tendencias o por popularidad.
Una vez que realizan la selección de las fuentes que desean usar estas se van agregando a un listado en la parte inferior derecha donde pueden eliminar las que ya no deseen.



Hay que indicar que deben agregar los fonts con mucho cuidado pues cada uno que agreguen a su lista significará un tiempo de carga extra que se agregue a su web.
Una vez que su selección termine solo procedan a hacer click en el botón USAR que aparece a la derecha de su listado de fuentes elegidas.
A continuación Google les permitirá elegir los estilos de cada tipo de letra elegido que deseen ya que muchos Fonts poseen más de un estilo, como letra normal, letra en negritas de distinto grosor, cursiva, etc.:



Conforme uds. Vayan eligiendo estilos verán cómo se incrementa el tiempo de carga de la página donde las inserten. Esto se muestra en un marcador al lado derecho donde están señalados los tiempos que son óptimos, riesgosos y peligrosos para la carga de la página:
Más abajo en esa misma pantalla podrán ver el código que deberán pegar en sus páginas para poder usar los tipos de letras elegidos. Tienen 3 alternativas:
• Usar una etiqueta LINK de html para insertar la hoja de estilos dinámica que se carga desde Google con los tipos de letra elegidos

• Usar una instrucción @import para importar esa hoja de estilos desde Google

• Usar unas instrucciones javascript para insertar código javascript que incluirá los fonts elegidos en nuestra página


Cualquier de las 3 formas funciona igual de bien. Particularmente prefiero la opción de la etiqueta LINK.
Una vez que “enlazaron” su página a los tipos de letra elegidos ya pueden usarlas en sus hojas de estilos. Para esto solo deben indicar en la propiedad Font-family de CSS el tipo de letra indicado. De esta manera:
El título de este artículo por ejemplo usa el tipo de letra Droid Sans y en la hoja de estilos hemos usado de esta forma la propiedad Font-family:
font-family:'Droid Sans', sans-serif;

Pueden ver un ejemplo de uso de 3 fonts bastante particulars y que en otros tiempos solo hubiera sido possible incluir mediante el uso de imágenes con lo perjudicial que eso resulta para el posicionamiento ya que Google no puede leer el contenido de las imágenes y estas no tienen valor semántico.

Pueden ver este ejemplo en una página aparte haciendo CLICK AQUÍ.

Usen el Firebug para ver el código fuente de ese ejemplo y verán que solo se han usado etiquetas H1, H2 y P y los Font-family elegidos de Google.