22 de octubre de 2016

Tutorial: Añadir y utilizar fuentes de Google Front en tu blog

   Feliz fin de semana, por fin unos días libres... esta semana no estuvo muy activo el blog por lo que los compensare con un nuevo tutorial/herramienta.
En esta edición les compartiré como instalar y utilizar fuente de Google Front, las cuales son muy útiles si quieres darle un nuevo estilo a las letras del blog. Esto es muy sencillo, solo presta mucha atención y sigue los pasos.

   La mayoría de mis plantillas pre-diseñadas tiene estilos de letras diferentes a las que ofrece blogger, razón por la cual este procedimiento esta más que verificado.
Ahí encontraras miles y miles de estilos. Google -por ahora- ofrece más de 800 fuentes, y todas las podemos utilizar... (diferencias entre los diferentes tipos de fuentes)

  • Selecciona las fuentes

Selecciona las fuentes que desees utilizar dándole click al botoncito + con fondo salmón/rojo. Veras que se irán acumulando en el pie de la página.

En mi caso y para este tutorial, seleccione 4 diferentes fuentes: 'Special Elite', 'Paytone One', 'Cantata One' y 'Space Mono'.

Una vez que ya tengas todas la fuentes deseadas, expande la ventana y selecciona el código que insertaremos en nuestra plantilla HTML.


Guardamos el código en un bloc de notas y antes del cierre le agregamos una barra ( / ) de manera de que queda así: 
<link href="https://fonts.googleapis.com/css?family=Cantata+One|Paytone+One|Space+Mono|Special+Elite" rel="stylesheet"/>

Instarlas en blogger

  • Abrimos nuestra plantilla HTML  y buscamos </head>, una vez ahí pegamos nuestro código modificado encima de </head>.
Ejemplo
La barra (/) antes de >. Es muy importante.

Añadiendo las fuentes a tus post

Para cambiar los tipos de letras, se utiliza: la etiqueta  font-family, font o en otro caso el título de la fuente.

Títulos de los post

  • Ve a PlantillaPersonalizarAvanzadoCSS
Para cambiar la fuente de los títulos de los post utilizaras este simple código.
.post h3 {
FUENTE
font-size: 25px;
}
Para este ejemplo he utilizado la fuente 'Special Elite'
Entendiendo el código:
  • font-family: Nombre de la fuente.
  • font-size: tamaño de la fuente.
Si quieres darle más estilo al título, añade antes del cierre (}):
✔ Para centrar el titulo: text-align: center;
✔ Para que todo el texto este en mayúscula: text-transform: uppercase;
✔ Para separas más las letras: letter-spacing: 3px;
✔ Si quieres que el texto tenga sombra: text-shadow: 2px 2px #ccc;

Para cambiar el títulos de los gadgets

En el caso de los gadget no todas las plantillas te dejan cambiar el tipo de letra desde el css por lo que es mejor dirigirte al HTML de tu plantilla y cambiarla directamente desde ahí. En estos casos solo tendrías que colorar el título de la fuente.

   En /* Variable definitions se encuentran los códigos, ahí debes de editar el grupo de <Group description="Gadgets" selector="h2"> busca el título de la fuente que tiene por defecto y cámbialo por el de tu nueva fuente, ejemplo:

✔ He cambiado Monstserrat por Space Mono.

El mismo caso se aplica para el título del blog, pero en <Group description="Blog Title" selector=".header h1">


RESULTADO

Blog de pruebas
Nota: En el ejemplo pueden notar que los  Gadgets han sufrido un cambio en conjunto con el estilo de fuente y eso se debe a que en el css del blog añadí algunos códigos demás, para el resultado final. En este caso utilice:
.sidebar h2 {
background: #F0EEEE;
border: 1px solid #F0EEEE;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
margin-bottom: -9px !important;
}
.widget-content{
padding:5px;
border: 1px solid #F0EEEE;
}  
   Ven que es fácil, solo hay que tener paciencia. Estas nuevas letras las puedes utilizar en diferentes partes de tu blog, como por ejemplo los encabezados. Ya que las tienes instaladas en tu plantilla no tienes que tener ningún tipo de problemas. Solo debes de estar pendiente de que al agregarlas no borren ningún otro código, una / o ; hace una gran diferencia en el HTML.

Espero utilicen Google Front, la cual es una de las herramientas más útiles para los bloggers.

Muchos besos y abrazos, hasta la proxima

4 comentarios:

  1. Gracias!!! me salvaste la vida! la verdad que me estuve volviendo loca con google fonts.

    ResponderEliminar
  2. Hola!
    Hacia tiempo había visto un tutorial parecido, pero me salió super mal D: Ahora voy a intentar con el tuyo a ver si me sale que con estas cosas soy un queso :p
    Por cierto, te nominé a unos premios en mi blog :D
    Saludos!

    ResponderEliminar
    Respuestas
    1. Gracias Luu espero te funcione bien las cosas con GF!

      Más tarde me paso por tu blog!
      Besos y saludos.

      Eliminar