viernes, 4 de octubre de 2013

Cambiar las fuentes de blogger: Google Fonts. Gracias a @oloman

Estos días ando de cambios en el blog, intentando cambiar la plantilla y dejar una apariencia un poco más elegante. Una de las cosas que he aprendido gracias al crack de @oloman es cambiar las fuentes del blog. En blogger no solo se pueden usar las fuentes por defecto sino que están accesibles todas las de Google Fonts. Hay unas 629 fuentes disponibles a fecha de hoy y en mi caso voy a usar Oswald para cambiar los títulos de las entradas.
 Lo primero que vamos a hacer es darnos un paseo por las fuentes disponibles o buscar directament la que deseamos:
Tenemso que hacer click entonces en el botón de Quick Use para haciendo scroll encontrar el código que nos permite insertar la fuente en nuestra plantilla:

 
Una vez que tenemos el enlace para importar nuestra fuente, vamos a importarla en nuestra plantilla de blogger. Para ello tenemos que modificar la plantilla y añadirla dentro del head. Que nos se os olvide añadir una / para cerrar el código HTML que hemos cogido de la web de Google Fonts.




Podemos probar que estamos insertando la fuente correctamente añadiendo un nuevo gadget del tipo HTML/Javascript en un lugar que no sea muy visible de nuestra página con el siguiente contenido

 

<span style="font-family: 'Oswald';">Estamos haciendo una prueba de la fuente Oswald</span>

¿Que debemos de ver entonces en nuestro blog?? Algo como os muestro en la imagen siguiente:
Si vemos algo similar a lo mostrado en la imagen anterior hemos establecido de forma  correcta nuestra fuente. ¿Cuál es el siguiente paso? En mi caso lo que quiero es cambiar el tipo de letra de los títulos del post por esta nueva fuente. Para ello tenemos que editar el código HTML de nuestro blog como hicimos anteriormente y buscar la etiqueta ]]></b:skin>. De aquí para atrás tenemos el CSS de nuestro blog y es donde tenemos que hacer los cambios. Pero ahora viene lo que me hizo dar vueltas durante una hora, dependiendo de la plantilla que estemos usando, el título de nuestros post se tiene que modificar de una forma u otra. Según la información que encontré por la web, para hacer las modificaciones tenemos que usar lo siguiente justo antes del ]]></b:skin>:
.post-title {font-family: 'Oswald' ; }
Pero en el caso de mi blog esto no es así dado que los títulos de la plantilla que uso vienen definidos por h3.post-title y entonces tuve que usar:

h3.post-title {
    font-family: 'Oswald';
    font-size: 25px;
}
Como podéis observar, también he cambiado el tamaño de la letra usando una un poco más grande con font-size: 25px;
Podemos ver como era la fuente de los títulos antes del cambio:


Y después de modificar el título:


Además de dar las gracias a @oloman de nuevo por la idea, también saqué información de aquí y aquí (ambos en inglés).

Si te ha gustado, comparte y difunde!

No hay comentarios :

Publicar un comentario