Hace tiempo que recibo algunos privados relacionados con Google Fonts, aunque hay muchos post por ahí explicándolo me han pedido que lo explique en mi blog, así que aquí te traigo el post explicándote cómo usar Google Fonts en Blogger. Intentaré hacerlo un poco diferente, lo intentaré, prometido.

¿Ya? Esta vez la que no estaba preparada era yo, que tú ya tenías todo preparado. Vamos al líousar-google-fonts-en-blogger

¿Por qué usar Google Fonts en nuestro blog?

En general las tipografías que trae Blogger por defecto son muy sosas y poco profesionales. Incluso las que deberían ser bonitas para títulos, dejan mucho que desear.

Es por ello que yo te recomiendo que uses Google Fonts en tu blog,  es super fácil y sólo vas a perder, alargándolo mucho, 15 minutos de tu tiempo.

Poner diferentes  tipografías nos hacen diferenciar nuestro blog del resto de blogs, forma parte de tu carácter. Encontrarás tipografías que será un flechazo para ti, dirás que las quieres, esa tipografía eres tu.

Conseguirás plasmar aún más tu personalidad a través de las tipografías del blog.

¿Cómo elegir  las tipografías?

Debes tener en cuenta que no todas las tipografías sirven para todas las partes de tu blog, así que debes elegirlas según un criterio muy básico y, a la vez, muy útil.

Para el título del blog: Si eres de esas personas que no usa una cabecera con imagen y le gusta más simplemente teclear el título y ya está, para este caso debes escoger una tipografía elegante, que se pueda leer pero que a la vez parezca un dibujo. Uno de esos casos es, por ejemplo, la tipografía Pinyon Script, la Montez o la Great Vives. Son tipografías muy elegantes y a la vez parecen dibujos hechos para títulos del blog.

Para el título del post: Aquí puedes escoger dos opciones, o hacer una tipografía muy recta tipo Montserrat en mayúsculas (queda muy bien) o otra tipografía elegante pero que ya no parezca tanto un dibujo y se pueda leer perfectamente. Para este segundo caso podrías escoger la tipografía Damion, la Righteous o la Special Elite.

Para el cuerpo del blog: En este caso debes asegurarte que se lee a la perfección, en este caso a mi me encanta la tipografía Lora y la Vidaloka. Son muy serenas y además se leen a la perfección. Pero en general puedes escoger entre todas las Serif y Sans Serif.

Para los gadgets: Para el título puedes usar la misma del título del post, si no yo en este caso usaría una tipografía recta que no destacase pero tampoco se fundiese y pasase desapercibida. Para el cuerpo, por el contrario, yo te recomiendo usar la misma que para el cuerpo del blog.

Después de ver qué tipografías puedes usar en cada caso, si quieres improvisar eres libre de hacerlo, pasemos a cómo se instalan en tu blog.

¿Cómo instalar Google Fonts?

Lo primero que debes hacer es escoger que tipografía usarás, una vez la tengas le debes clicar a “add to collection”, un botón azul muy vistoso que se encuentra a la derecha.

add-to-collection

Una vez la tengas añadida a tu colección debes darle a “use” que te aparecerá en la esquina inferior derecha de tu pantalla.

use

 

Ahora se te habrá abierto otra página donde verás unos códigos que quizá te intenten dejar KO, pero no les des esa oportunidad.

El primer código es para poner en el html de tu plantilla y el segundo en el CSS, pero relax, es muy fácil.

IMPORTANTE: Haz una copia de seguridad de tu plantilla en Plantilla –> Crear/Restablecer copia de seguridad –> Descargar.

Una vez guardada la copia con cada fuente que quieras usar deberás hacer lo siguiente:

  1. Ir a plantilla –> Editar HTML y allí, clicar dentro del código y con el teclado clicar Control+F para que se te abra un buscador.  En ese buscador deberás buscar <head> y justo debajo enganchar tu código para el html.

Pongamos que has escogido la tipografía Roboto, en este caso te saldrán un montón de opciones, pon simplemente la que tú quieras en tu blog, yo he escogido por ejemplo la Normal 400.

estilos

 

Empecemos con el código html y css…

Entonces el código html que te da es el siguiente:

<link href=’https://fonts.googleapis.com/css?family=Roboto’ rel=’stylesheet’ type=’text/css’>

Ahora este código debo pegarlo debajo de <head> de mi plantilla, pero además, para que funcione (SUPER IMPORTANTE) debo poner / justo antes de > en el código de la tipografía. El resultado sería este:

<head>

<link href=’https://fonts.googleapis.com/css?family=Roboto’ rel=’stylesheet’ type=’text/css’/>

Esto debes hacerlo con todas las tipografías que uses, debajo de <head> pegas el código que te ha dado donde pone “add this code to your website” y añadirle el / antes de >.

html-codigo

 

Una vez hayas hecho esto, te recomiendo que hagas todos los pasos de una en una tipografía por tipografía, no hagas todo el primer paso con todas y luego el segundo, si no hazlo uno, dos, uno, dos, uno, dos con cada tipografía.

2. El segundo paso y ya el último donde realmente verás cómo cambia tu blog es el de añadir el CSS.

Si te fijas, en la tipografía que has escogido hay un apartado que pone “integrate the fonts to your CSS”, pues ese es el código que necesitamos añadir a estos otros. Ahora te voy a decir qué códigos debes poner según donde quieras poner dicha tipografía.

css-codigo

 

Simplemente donde pone font-family: deberás cambiar esa línea por la línea que ponga en tu tipografía, así de sencillo. En mi caso font-family: ‘Roboto’, sans-serif;

Para cambiar el título del blog (cabecera):

.header h1 {
font-family: ‘Roboto’, sans-serif;
}

Para cambiar el título de las entradas:

h3.post-title {
font-family: ‘Roboto’, sans-serif;
}

Para cambiar el título de los gadgets:

.sidebar h2 {
font-family: ‘Roboto’, sans-serif;
}

Para cambiar el cuerpo del blog:

body {
font-family: ‘Roboto’, sans-serif;
}

Y si sólo quieres cambiar la tipografía del cuerpo del post usa este:

.post-body {
font-family: ‘Roboto’, sans-serif;
}

¿Dónde debes copiar estos códigos sin dejarte ni una coma? Simplemente ves a Plantilla –> Personalizar –> Avanzado –> Añadir CSS. Allí es donde debes copiar estos códigos según qué parte de tu blog quieras cambiar con esa tipografía.

Repito: Hazlo paso por paso, tipografía por tipografía, no intentes añadir todos los html juntos y luego los CSS porque te vas a hacer un lío.

¿Que te ha parecido este tutorial? ¿Te gusta que vaya haciendo cosas sencillas para ir mejorando poco a poco tu blog?

Si tienes cualquier duda que no te de miedo preguntar, no suelo morder 😉

Un besazo enorme!

Laura

Pin It on Pinterest

Share This