miércoles, 11 de agosto de 2010

Como usar las fuentes Nuevas que ofrece Google Font API en tu blog

fuentes nuevas

Hola chicas (os), 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 atractivas, y que puedes usar en tu blog de manera gratuita, sin restricciones y en donde además no es necesario que las visitas de tu blog  tengan instaladas dichas fuentes en su computadora,  para que puedan ser vistas.



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 llego la hora de embellecer el blog con el uso de bonitas fuentes, con tan solo insertar un vínculo especial en el codigo de tu plantilla.



¿Cómo instalar las fuentes nuevas?



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 usaré la fuente llamada Lobster, y su codigo 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 lo acepte 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 edicion de HTML de tu plantilla, buscas la etiqueta <head> y pegas 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 resaltado con negrita, como se muestra:




h1.title {

 ...

font-family: "Lobster", serif, arial;

...

}



Paso 4. Luego checas en vista previa y si todo luce bien, guarda los cambios.



Si deseas puedes poner  Sombra en el texto.



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>



Ultima actualización: Febrero 17 2012.

No hay comentarios:

Publicar un comentario