Sí, ya sé que Blogger tiene un montón de fuentes predeterminadas entre las que elegir... ¡pero es que hay algunas fuentes monísimas que podemos usar para nuestros títulos! Pero no están en Blogger, sino en Google Fonts, ¡echadle un ojo! Os van a encantar.
Así que hoy vamos a ver como instalar una fuente de Google Fonts en Blogger para que el título de nuestras entradas sea más bonito y combine con la estética de nuestro blog. ¡Es muy sencillo!
1.- Entramos en Google Fonts (desde el enlace que os puse más arriba)
2.- Podemos ir pasando páginas hasta ver las más de 600 fuentes que podemos instalar... o usar el buscador para acotar nuestra búsqueda.
En All Categories podéis elegir el tipo de fuente.
Si os interesa conocer la diferencia entre los diferentes tipos de fuentes (Serif, Sans Serif , Display y Handwritting) podéis leer este artículo, lo explica muy bien y es la mar de interesante (yo es que soy curiosa por naturaleza).
3.- Os voy a enumerar algunas que podéis buscar usando el buscador, son de las que más me gustan:
Annie Use Your Telescope
4.- Raleway (está es genial, muy fina y elegante)
5.- Amatic SC, ¡Super original! Podéis verla funcionando en el Blog de Mariam; Lunares Grises.
6.- Josefin Sans. Me gusta mucho por lo fina que es.
* Para mis títulos he elegido la Patrick Hand SC. También podéis buscarla si os gusta.
7.- Cuando encontremos una que le vaya bien a la estética de nuestro blog pulsamos en Add to Collection, a la derecha del tipo de letra elegida.
9.- En la siguiente ventana verificamos que esa es la fuente que queremos.
Quedaría así:
type='text/css'/>
Si no lo hacéis, no funcionará.
12.- Abrimos nuestra plantilla HTML una vez tengamos nuestro código modificado y buscamos </head> (Ya sabéis, para abrir el buscador interno, pincháis en cualquier punto de la plantilla y pulsáis simultáneamente Ctrl + F)
14.- Volvemos a Google Fonts para copiar el siguiente código en la parte del CSS de nuestro blog (ahora vemos donde)
.post h3 {
(aqui el código que habéis copiado de Google Fonts)
font-size: 25px;
}
En la parte roja ponéis el segundo código de Google Fonts, en mi caso:
font-family: 'Patrick Hand SC', cursive;
Y en la parte verde, el número antes de px, indica el tamaño de la letra. Cuando la tengamos instalada en el Blog, en Vista Previa, podemos ir viendo que tamaño queda mejor.
Una vez modificado nuestro código, lo pegamos en nuestra plantilla HTML.
Justo antes de ]]></b:skin>, como en la siguiente imagen:
16.- ¡Y éste es el resultado!
¡Ya me contáis que fuente habéis instalado! Hay para todos los gustos, así que seguro que encontráis una que quede perfecta en vuestro blog.
¿Te ha resultado interesante esta entrada?
¡¡Compártela en tus redes sociales!!
Puede que a alguno de tus contactos también le resulte útil
Gracias ♥