Cambiar la fuente del título de las entradas

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.

8.- Abajo nos aparecerá una pestaña gris llamada Collection con el número de fuentes que tenemos guardadas. Para empezar con la instalación en Blogger pinchamos en Use, a la derecha.

9.- En la siguiente ventana verificamos que esa es la fuente que queremos.

10.- Nos aseguramos de tener marcado Latín.

11.- Y llegamos al primer código que tenemos que insertar en nuestra plantilla HTML.

Copiarlo en word y añadir una barra al final, justo antes de >.

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)

13.- Pegamos nuestro código modificado justo encima de </head>. Comprobad en Vista Previa que no os vuelca error en la plantilla. Si os sale error, comprobad que habéis modificado el código bien, como vimos en el paso 11 y que se ve igual que el mío, que es éste:

¿Véis? La barra (/) justo al final, antes de >. Es muy importante.


14.- Volvemos a Google Fonts para copiar el siguiente código en la parte del CSS de nuestro blog (ahora vemos donde)

15.-  El código que vamos a usar es:

.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:

Pulsamos Vista Previa para comprobar que no hay errores y podemos ir modificando el tamaño de la letra hasta que quede como queremos.


16.- ¡Y éste es el resultado!

* El color ya sabéis que se modifica en Plantilla --> Personalizar --> (Diseñador de Plantillas) --> Avanzado --> Enlaces. Los títulos de nuestras entradas son simples enlaces, así que podéis cambiar ahí el color, pero se cambiará el de todos los enlaces que tengáis, tanto en las entradas como en el sidebar.

¡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.

¿QUIERES APRENDER A DISEÑAR BLOGS PROFESIONALES EN BLOGGER?

¡CON UN MONTÓN DE PLANTILLAS Y MANUALES PARA PRACTICAR!

ECHA UN VISTAZO A MI PROGRAMA DISEÑA EL BLOG DE TUS SUEÑOS: 

SI QUIERES QUE DISEÑEMOS EL BLOG DE TUS SUEÑOS JUNTAS

HAZ CLICK AQUÍ:

---

Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥