...

Cambiar el tipo de letra de tu blog

11 dic 2014

Hoy te voy a explicar cómo cambiar la tipografía de tu blog.

Tal vez ya te parezca correcta la tipografía de tu plantilla, pero, si quieres cambiarla, es posible!

Puedes cambiar la tipografía de tus entradas, o de los titulares de éstas, o del título de los gadgets, etcétera.

Empezaremos por ir a GOOGLE FONTS y allí escogeremos el tipo de letra que más nos guste. Por ejemplo, en este blog la tipografía de mis entradas es la Open Sans.

Bien, pues, una vez hemos escogido la tipografía, le damos a Add to Collection y luego a Use. Veremos que nos da varios códigos que tendremos que añadir a nuestra plantilla:


Empezaremos por copiar el link que nos da Google Fonts en el punto 3: Add this code to your website. Para ello, nos vamos a PLANTILLA => (guarda una copia!) => Editar HTML => buscamos (CTRL+F) <head> => justo debajo pegaremos el link pero, OJO, una vez lo hayas hecho y ANTES DE GUARDAR LOS CAMBIOS, añade el / antes de >. Esto es muy importante ya que si no te dará error!
Quedaría así: (en esta imagen verás que hay dos tipografías, Open Sans y Parisienne, porque tengo ambas en el blog)


Primera parte terminada! Ahora vamos de nuevo a PLANTILLA => PERSONALIZAR => AVANZADO => Añadir CSS => aquí vamos a pegar un código para que la tipografía que has escogido se aplique a donde tú digas. El código va a a ser diferente dependiendo de si lo que quieres modificar es la letra de tus entradas, de los títulos de tus entradas, etcétera.

La imagen de abajo es tal y como yo lo tengo a día de hoy en mi blog:


Te doy los códigos que deberás copiar a tu CSS en función de a qué elemento quieres cambiar la tipografía. Simplemente acuérdate de poner el código CSS que Google Fonts te da para la tipografía que has escogido.  Por ejemplo, en la primera imagen te marco el recuadro del código CSS de Google. En el ejemplo de Open Sans, este sería font-family: 'Open Sans', sans-serif;     

CÓDIGOS CSS PARA CAMBIAR LA TIPOGRAFÍA DE TU BLOG

CUERPO

body { 
  font-family: 'Open Sans', sans-serif;
}

TÍTULO DE LAS ENTRADAS

h3.post-title {
  font-family: 'Open Sans', sans-serif;
}

TÍTULO DE LOS GADGETS

.widget .title {
  font-family: 'Open Sans', sans-serif;
}

Ya está! Ya tienes la tipografía que más te gusta en un tu blog!!

2 comentarios:

Muchas gracias por tu comentario!