Hoy vamos a aprender fácilmente como podemos cambiar la tipografía (escritura), de nuestro blog, con Google Fonts, ya que hay muchísimos tipos y además de ser gratis, se pueden descargar par usarlas en otros programas o documentos.
Lo primero que teneos que hacer es buscar Google Fonts en nuestro navegador
Un vez dentro buscamos la tipografía que nos gusta, pulsamos el botón azul Add to Collectión.
Esto es para agregarla a nuestra colección.
Ahora debes de pinchas en botón que ves en la imagen, Quick-Use ( uso rápido ) para conseguir el código que vamos a utilizar en nuestra plantilla.
En nuestro blog, nos vamos a Diseño-Plantilla-Editar HTML.
Buscamos la etiqueta <Head> que está casi al principio de nuestra plantilla, y pega justo debajo el código que nos ha generado Google Fonds.
Tal y como ves en la imagen.
Pero antes de guardar nuestra plantilla, debes cerrar la etiqueta con / justo antes de CSS, como este ejemplo:
Ahora es el momento de guardar nuestra plantilla, pero nos ubicaremos en el CSS.
Nos vamos a Diseño-Plantilla-Personalizar- Avanzado-Añadir CSS.
Voy a mostrar el código que tendremos que poner para cambiar toda la tipografía de nuestro blog.
Lo que vemos en rojo lo cambiaremos por el cógido que a generado Google Fonds, tal y como vemos en la imagen.
Para cambiar solo los títulos de la entradas pondremos este.
Para cambiar la cabecera pondremos este.
Para cambiar el cuerpo de las entradas, pondremos este.
Siempre debemos de cambiar lo que tenemos en rojo por el texto de Google Fonds.
Lo primero que teneos que hacer es buscar Google Fonts en nuestro navegador
Un vez dentro buscamos la tipografía que nos gusta, pulsamos el botón azul Add to Collectión.
Esto es para agregarla a nuestra colección.
Ahora debes de pinchas en botón que ves en la imagen, Quick-Use ( uso rápido ) para conseguir el código que vamos a utilizar en nuestra plantilla.
En nuestro blog, nos vamos a Diseño-Plantilla-Editar HTML.
Buscamos la etiqueta <Head> que está casi al principio de nuestra plantilla, y pega justo debajo el código que nos ha generado Google Fonds.
Tal y como ves en la imagen.
Pero antes de guardar nuestra plantilla, debes cerrar la etiqueta con / justo antes de CSS, como este ejemplo:
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css/'>
Ahora es el momento de guardar nuestra plantilla, pero nos ubicaremos en el CSS.
Nos vamos a Diseño-Plantilla-Personalizar- Avanzado-Añadir CSS.
Voy a mostrar el código que tendremos que poner para cambiar toda la tipografía de nuestro blog.
body { font-family: ‘Amatic SC’;}
Lo que vemos en rojo lo cambiaremos por el cógido que a generado Google Fonds, tal y como vemos en la imagen.
Para cambiar solo los títulos de la entradas pondremos este.
h3.post-title {font-family: ‘Amatic SC’;}
Para cambiar la cabecera pondremos este.
.header h1 {font-family: ‘Amatic SC’;}
Para cambiar el cuerpo de las entradas, pondremos este.
.post-body { font-family: ‘Amatic SC’;}
Siempre debemos de cambiar lo que tenemos en rojo por el texto de Google Fonds.
0 Comentarios