Manual de uso de las Google Font API
Hace relativamente poco Google publicó una nueva API con la que independientemente de las fuentes instaladas en nuestros ordenadores podamos utilizar cualquier familia de tipografías, sin tener que recurrir a hacks/trucos tales como utilizar imágenes cuando queríamos utilizar una tipografía no estandar.
El nombre de la API es Google Font API y al igual que otras APIS de Google, su uso es muy sencillo. Lo veremos en un instante.
La idea principal que tiene Google es la de compartir con todo el mundo una amplia biblioteca de fuentes de letra, de gran calidad y open source, conocida como Google Font Directory. En el anterior enlace podremos ver todas y cada una de las fuentes que hasta ahora nos proporciona Google.
Para utilizar el API simplemente tendremos que insertar la siguiente etiqueta en cualquiera de nuestras páginas HTML:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=NOMBRE_FUENTE"> |
cambiando NOMBRE_FUENTE por el nombre de la fuente tipográfica que queramos utilizar. Si queremos utilizar más de una fuente en nuestras páginas simplemente tendremos que separar cada una de ellas con el carácter “|”.
Por ejemplo vamos a utilizar las tipografías Tangerine, Droid Sans y Lobster:
http://fonts.googleapis.com/css?family=Tangerine|Droid+Sans|Lobster |
Ahora solo nos queda asociar dicha tipografía en nuestros estilos de la siguiente forma:
h1{font-family: 'Tangerine', verdana; } |
Un ejemplo final puede ser el siguiente:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Droid+Sans|Lobster"> <style> h1{font-family: 'Tangerine', verdana; } h1.titulo2{font-family: 'Droid Sans', verdana;} h1.titulo3{font-family: 'Lobster', verdana;} </style> </head> <body> <h1> Deckerix en Tangerine!</h1> <h1 class="titulo2"> Deckerix en Droid Sans!</h3> <h1 class="titulo3"> Deckerix en Lobster!</h1> </body> </html> |
Según las FAQS de Google, los navegadores que soportan y/o son compatibles con la nueva API son:
* Google Chrome: version 4.249.4+
* Mozilla Firefox: version: 3.5+
* Apple Safari: version 3.1+
* Opera: version 10.5+
* Microsoft Internet Explorer: version 6+
A partir de aquí nos puede surgir la duda de si usar o no la Google Font API. Todo en esta vida tiene sus ventajas y sus inconvenientes.
Ventajas:
* Se comportan como texto normal, no hay canvas ni otros objetos.
* Se genera texto normal y corriente y por lo tanto es indexable e interpretado por los buscadores.
* Ganamos mucho en cuanto a apariencia. El diseño es más atractivo.
* Rápido a la hora de cargar las fuentes.
* No necesitaras retocar todas esas imagenes creadas para mostrar un “texto” con una tipografía en especial
Inconvenientes
* No hay todavía muchas tipografías de fuentes.
* Depender de un tercero, en este caso de que Google mantenga la API. (no quiero recordar la Google Wave)
* Si el API falla todo nuestro sitio va a mostrar las tipografias por defecto.
* Si el navegador no tiene compatibilidad con la propiedad font-face también va a mostrar una fuente por defecto.
Actualización:
Existe un Plugin de WordPress para utilizar esta nueva API. Google Font API Plugin