viernes, 30 de octubre de 2015

Poner una fuente personalizada en tu bitácora

Primero entramos en la página de GOOGLE FONTS y elegiremos una tipografía que nos guste.
Una vez localizada, haremos clic en el botón "Quick-use":
Ahora elegiremos el tamaño (1), y seleccionaremos el pertinente código (2) para copiarlo y pegarlo posteriormente en la plantilla de nuestra bitácora:
Recuerda guardar una copia de seguridad antes de modificar nuestra plantilla del blog.
A continuación procederemos a introducir el código a pegar modificando la plantilla de nuestro blog:
Ahora pegaremos el código inmediatamente debajo de <head>:
Debemos añadir "/" casi al final de la línea que hemos añadido (5), justo antes de ">":
Guardamos los cambios.
Regresamos a la página de GOOGLE FONTS y debajo del punto "4. Integrate the fonts into your CSS:" encontraremos el código que tenemos que introducir en nuestro CSS.
Para ello, en nuestro panel de control del blog, vamos de nuevo en el menú de la izquierda "Plantilla", después le damos al botón Personalizar > Avanzado > Añadir CSS (7), y en el recuadro de la derecha tendremos que pegar el código correspondiente según deseemos:

  • Si queremos usar un tipo de letra para todo el blog, añadiremos el código:
body {font-family: 'Oswald', sans-serif;}
  • Para cambiar y personalizar sólo el título de las entradas:
h3.post-title {font-family: 'Oswald', sans-serif;}

  • Para cambiar el tipo de letra de la cabecera:
.header h1 {font-family: 'Oswald', sans-serif;}
  • Para cambiar el tipo de letra del cuerpo de las entradas, hay que usar el siguiente:
.post-body {font-family: 'Oswald', sans-serif;}
El código es lo que va en naranja. En azul tenemos el nombre de la tipografía que copiamos según se indica en la imagen (6).
Por último le damos a "Aplicar al blog" y listo.
LEER MÁS...