Lo Último

Usar fuentes personalizadas en tu blog




Hoy vamos a explicar como usar fuentes personalizadas en tu blog de blogger. Pon un toque de distinción que diferencie a tu blog de los demás.

Es posible cambiar las fuentes en Blogger, y ésto se consigue fácilmente con Google Fonts una sección de Google que ofrece distintas fuentes y los códigos para introducirlas en nuestro blog.

Recuerda hacer una copia de seguridad de tu plantilla pos si las moscas, no vaya a ser que te la cargues sin querer.

Lo primero es entrar a la página de Google Fonts y elegir una tipografía que te guste, entonces haces click sobre el botón de color azul de la derecha que dice Add to collection, al hacer esto en la parte inferior de la página te mostrará el nombre de la  fuente añadida a tu colección (parte izquierda inferior) y en el lado derecho tendrás tres botones, pulsa en Use

La siguiente pantalla te dará una serie de pasos, tienes que ir al paso 3 donde hay un código como el de la siguiente imagen:


Google no incluye el carácter / que cierra el código, tendrás que ponerlo tu a mano justo antes del último símbolo > , por tanto antes de pegar el código en tu plantilla es mejor que lo pegues en un archivo de texto y lo hagas bien, quedará así:




No cerréis el panel de Google Fonts porque más adelante tendréis que copiar el código del paso 4 en la caja del CSS:




Una vez introducido el carácter / procedemos de la siguiente forma:

Ir a tu "Escritorio Blogger"
Pulsar en tu "Blog"
Pulsar en "Plantilla"
Pulsar en "Edición de html"
Busca <head> y justo debajo pega el código del paso 3
Pulsa en "Guardar plantilla"
Pulsa en "Atras"
Pulsa en "Personalizar"
Pulsa en "Avanzado"
Deslízate hacia abajo hata encontrar "Añadir CSS"
Y en la caja de la derecha pega el siguiente código:



Si es para personalizar los títulos de las entradas:
/--------------------------------------------------\
h3.post-title {
  font-family: 'Amatic SC';

}
\--------------------------------------------------/



Si es para todo el blog:
/--------------------------------------------------\
body {
  font-family: 'Amatic SC';
}
\--------------------------------------------------/



Si es para la cabecera del blog:
/--------------------------------------------------\
.header h1 {
  font-family: 'Amatic SC';
}
\--------------------------------------------------/



Si es para el cuerpo de las entradas:
/--------------------------------------------------\
.post-body {
  font-family: 'Amatic SC';
}
\--------------------------------------------------/

Ya sólo tenéis que cambiar lo que está en rojo por el código del paso 4 que os ha dado Google Fonts, pulsar en "Aplicar al blog" y ya podéis ir a ver los cambios en vuestro blog.



Como véis no es nada tan difícil y puede quedar un blog exclusivo. Puedes agradecer añadiéndote como seguidor de Blogger In en el gadget justo abajo, pulsa en "Participar en éste sitio" y sigue los pasos hasta aparecer entre los seguidores