Google Font API en Blogger

Me enteré por un ronroneo de Pau pero, seguramente, ya lo habrán visto anunciado en muchos sitios así que, para no ser menos, aquí vamos a probar este nuevo juguetito que nos regala Google: la llamada Google Font API que nos va a permitir utilizar fuentes de texto no convencionales en cualquier sitio web sin tener que estar lidiando con archivos complicados de alojar y difíciles de manejar.

Es tan sencilla que llama la atención y si bien la biblioteca disponible aún no es demasido grande, las alternativas que se presentan de acá al fuuro son increibles.

Las fuentes disponibles pueden verse en el directorio de Google Font y muchas de ellas tiene variantes, basta hacer click en cada una de ellas para que nos vayan guiando hasta una descripción detallada con ejemplos online y el código necesario que siempre es el mismo y donde sólo varia el nombre.

Un ejemplo simple, copiamos y pegamos lo siguiente en el head de nuestra página, por ejemplo, en Blogger, justo antes de <b:skin>:

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

Aquí estamos cargando una fuente llamada Lobster pero, cualquier otra es similar, siempre usamos el mismo código:

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

y si el nombre tiene espacios intermedios, los reemplazamos con el signo +. Así incluiríamos la fuente llamada Crimson Text:

<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css' />

Y ahora, ¿cómo la usamos? Como cualquier otra fuente, simplemente, la colocamos en la propiedad font-family:

h3 {
font-family:'Lobster',serif;
}

o en una etiqueta con el atributo style:

<a style="font-family:Lobster,serif;"> un enlace </a>

Todo esto, sin restricciones, usando IDs, clases, etc, tal como haríamos con cualquier otra fuente "normal", agregando tamaños, colores, etc.

Hay una guia bastante completa (en inglés) donde se muestran las diferentes alternativas, allí, nos dicen que si queremos agregar varias, basta declararlas separándolas con el caracter | así que para usar las dos anteriores (Lobster y Crimson Text) podríamos escribir esto:

<link href='http://fonts.googleapis.com/css?family=Lobster|Crimson+Text' rel='stylesheet' type='text/css' />

Una alternativa es usar el cargador que es un script. En ese caso, en lugar de usar la etiqueta LINK, colocamos lo siguiente:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript">
//<![CDATA[
WebFont.load({
google: {
families: [ 'Lobster', 'Crimson Text' ]
}
});
//]]>
</script>

<link href='http://fonts.googleapis.com/css?family=Tangerine|Crimson+Text|IM+Fell+English+SC|Lobster|Reenie+Beanie' rel='stylesheet' type='text/css'/>

luego definí una serie de clase CSS:

div.tangerine {
color: #000;
font-family: 'Tangerine',serif;
font-size: 36px;
text-shadow: 2px 2px 2px #888;
}
div.crimson {
color: Brown;
font-family: 'Crimson',serif;
font-size: 26px;
}
div.imfell {
background-color: #000;
color: #FFF;
font-family: 'IM Fell English SC',serif;
font-size: 34px;
line-height: 1em;
padding: 10px;
text-shadow: 0 5px 1px #888;
}
div.lobster {
color: #555;
font-family: 'Lobster',serif;
font-size: 18px;
}
div.reenie {
border: 1px solid #000;
color: CornflowerBlue;
font-family: 'Reenie Beanie',serif;
font-size: 64px;
font-weight: bold;
letter-spacing: -5px;
line-height: normal;
}

Que usé igual que cualquier otra, en este caso, en una entrada:

<div class="crimson"> ....... </div>