Cómo Añadir Fuentes de Google Fonts a tu Blog (Blogger)

Hoy vengo con un tutorial de esos que os gusta para poder personalizar más aún nuestros blogs. Seguro que alguna vez habéis visto algún tipo de letra en los títulos de un blog que os ha gustado y os habéis preguntado cómo podríais ponerla en el vuestro. Pues de eso vamos a hablar hoy.

Antes de comenzar, deciros que no se nos puede ir la cabeza con el tema de las fuentes, porque aunque queden muy bonitas, sobretodo hay que buscar la comodidad del lector a la hora de pasar el rato leyendo nuestras entradas del blog. Por esta razón os recomiendo que para el texto de las entradas uséis una letra sencilla, que no canse al leer, y dejéis las chulas para el título de las entradas o de los gadget de la sidebar, por ejemplo.

Ahora bien, vamos con el tutorial. Para ello usaremos la web Google Fonts, en la que podréis encontrar tipografías de muchos tipos. Os puede llevar tiempo verlas todas, porque son un montón (yo nunca las he acabado de ver), pero una vez que hayáis elegido una, procederemos a instalarla en el blog.


En este caso voy a poner el ejemplo con la tipografía "Parisienne", que es la que uso en los títulos de la sidebar a día de hoy (podéis buscarla mediante el buscador que hay en la misma web, si la queréis usar). A continuación haremos clic en "Quick-use"


Dependiendo de la fuente, puede tener uno o varios estilos. Podemos seleccionar los que queramos. En el caso de Parisienne sólo sale uno, así que no hay problema. Si hubiera varios, la forma de actuar sigue siendo la misma. Un poco más abajo encontraremos el código que deberemos usar para añadir la fuente. Lo copiamos y lo pegamos en la plantilla, Plantilla/Editar HTML, después de la etiqueta <head> . Antes de guardar deberemos añadir al final del código, antes del cierre, la barra inclinada o slash (/) ya que sino no lo podréis usar. Sería el mismo código sólo que si miráis el final, pondría "type='text/css'/> (en el caso del ejemplo)


Ahora ya tenemos la fuente en nuestro blog, sólo hay que decirle dónde queremos que aparezca. Para ello buscamos en el código HTML (en este caso las cabeceras de los gadgets) y cambiamos la fuente que aparezca en font-family, por la que hayamos elegido. En mi caso el código queda así (depende de tu plantilla si es igual o diferente). Tened cuidado al cambiarla, no borréis el punto y coma final, porque es necesario.


Podremos ver en vista previa cómo aparece nuestra nueva letra en el lugar indicado. Ahora hay que adaptarla en tamaño si fuera necesario y listo.

Cómo véis para este tutorial hay que tener un poco de base para poder buscar el lugar apropiado dónde cambiar el nombre de la tipografía. Acordáos siempre de hacer una copia de seguridad antes de aplicar un tutorial (para evitar posibles errores) o podéis tener un blog de prueba de conejillo de indias.

Espero que os haya servido el tutorial y que podáis ponerlo en práctica sin muchos quebraderos de cabeza.

Nos vemos en la siguiente entrada! Happy day!

Sígueme en

6 comentarios

  1. Gracias!!! lo guardo para cambiarlo en las vacaciones que ya me queda poquito!! nunca había usado google fonts, siempre miraba en dafonts!

    ResponderEliminar
  2. No estoy pensando en cambiarla, pero una vez que la cambié tuve que hacer mucho más rollo que esto! Muy útil!

    ResponderEliminar
  3. Se agradece muchísimo porque hay fuentes muy chulas a las que nos acabas de abrir el paso! Gracias, flor!

    ResponderEliminar
  4. muy util!! muchas gracias, yo alguna vez que lo he intentado... al final me ha salido rana!! asi que probaré de esta manera a ver
    un besote

    ResponderEliminar
  5. Yo cuando la cambié fui muy torpe y me lo tuvieron que terminar haciendo pero no obstante, comparto el tutorial :)

    ResponderEliminar
  6. Hola. Muchas gracias por el post, esta muy bien explicado. Sólo que ya lo intente muchas veces y la fuente de mi blog permanece igual. Saludos

    ResponderEliminar


¡NO SPAM! Por favor, no dejes direcciones web en los comentarios (a no ser que se pidan o en iniciativas), sino serán eliminados ¡GRACIAS!

➡ Usa lenguaje apropiado: no se permiten insultos, discriminación, etc...

Con la tecnología de Blogger.