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-
Edtar 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:
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.
Edtar 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/'>
|
. <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/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.
