11 agosto 2010

Cómo usar las fuentes Nuevas que ofrece Google Font API en tu blog

fuentes nuevas

Hola qué tal! No quería regresar sin antes tenerles una plantilla lista, pero al ver esta forma de mostrar fuentes en el blog, no pude resistirme a compartirlo con ustedes. Me encantó por la sencillez de su uso, y los resultados en el blog.

¿De qué se trata?

Se trata de un servicio que recientemente anuncio Google llamado Google font API, que facilita el uso de fuentes muy bonitas, y que puedes usar en tu blog de forma gratuita y sin restricciones.

Como ya muchos saben, si  usas una fuente de diseño en el blog y un usuario no tiene esa fuente instalada en su computadora, simplemente la fuente se mostrará con la fuente predeterminada,  así que su uso está muy limitado por esa razón.

Pero ahora con Google API Fonts, nos llegó la hora de embellecer el blog con el uso de bonitas fuentes, con tan solo insertar un vínculo especial en el código de tu plantilla.

Para el caso de las plantillas nativas de Blogger, desde el Diseñador de plantillas es posible seleccionar fuentes de diseñador, y que dependen de Google Font API para ser mostradas, no siendo posible en algunas plantillas personalizadas que no tienen los códigos necesarios para que ésto funcione.

En tal caso, tendremos que instalar las fuentes, primero vinculándola y luego, declarando el tipo de fuente con CSS, para que se vean en el blog. Veamos cómo hacerlo ;)


¿Cómo instalar las fuentes?

Si no te es posible seleccionar las fuentes en tu blog desde el diseñador de plantillas o simplemente quieres usar otra fuente que no esta disponible desde el diseñador, harás lo siguiente:

Paso 1. Lo primero que tienes que hacer es ingresar al directorio de fuentes , de Google font Api, y elegir la fuente que más te gusta, luego haz click en get the code (obtener el código), para ponerlo en tu plantilla.


Como ejemplo, yo estoy obteniendo el código de la fuente llamada Lobster, tal y como puedes apreciar en la imagen de arriba, y su código es el que puedes ver a continuación:

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

Nota:  Para que funcione en Blogger, es necesario agregar a ese código una diagonal "/" (barra de cierre) al final, como lo puedes apreciar en el código anterior.

Paso 2. Luego, vas a la edición de HTML de tu plantilla, buscas la etiqueta <head> y pegas después de ésta dicho código.

Paso 3. Ahora,  hay que definir en el CSS donde quieres mostrarla, para ello solo tienes que poner el nombre de la letra en  la parte de plantilla donde quieres que se muestre.

Por ejemplo, si la quieres usar en el título del blog, tienes que agregar lo coloreado de azul, como se muestra:


h1.title {
font-family: "Lobster", serif, arial;
...
}


Ésto pensando que ya tengas definido CSS en tu plantilla para el titulo del blog, si no hay que poner toda la regla completa.

Paso 4. Luego echas un vistazo al blog en vista previa y si todo luce bien, guarda los cambios.


También  puedes usar las fuentes en ciertas partes del blog, como bloques específicos en tu estradas, y para ello usarás el siguiente código:

<div style="font-family: 'Nombre de la fuente', serif;">Tu texto aquí</div>



Nota: Desde la página de Google nos hacen saber que usar las fuentes, tiene un impacto en la carga del blog, así que una buena idea es medir el impacto de cada fuente de diseño que agreguemos y tratar en lo posible de no abusar usando muchas diferentes ;)


¿Qué te parece la posiblilidad de usar fuentes de diseño en el blog, ya has probado alguna?


Ultima actualización: Febrero 17 2012.

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.