11 agosto 2010

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

fuentes nuevas
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.

Se trata de un servicio que recientemente anunció Google llamado Google font API, que facilita el uso de fuentes de diseñadores muy bonitas, 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, que son descargadas desde Google Font API, no siendo posible en algunas plantillas personalizadas que no tienen los códigos necesarios para que ésto funcione.

En tal caso, tendremos que instalar la fuente que nos interese, primero vinculándola y luego, declarando el tipo de fuente con CSS para que se vea 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 distinta que no esté 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 deseas usar, luego haces click en get the code (obtener el código), para ponerlo en tu plantilla.


Como ejemplo, he elegido la fuente Lobster. A continuación muestro el código de dicha fuente, tal y como puedes apreciar en la imagen de arriba.

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

Para que pueda insertarse el código anterior en las plantillas de Blogger, es necesario agregar una 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 todo el contenido blog (entradas, columna lateral y pie de la página), tienes que agregar lo coloreado de azul, como se muestra:

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



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 estas fuentes, tiene un impacto en la carga del blog, así que una buena idea es no abusar de éstas, usando por ejemplo solo una de ellas ;)


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


Última actualización: Febrero 17 2012.

Artículos recomendados:

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