sábado, 17 de septiembre de 2016

Google Fonts: cambia la fuente de tu blog


¡Buenas noches!

Os traigo un nuevo tutorial que creo a muchos os puede interesar y es: ¿ Cómo cambiar la fuente predeterminada de mi blog? . No es algo dificil de hacer, solamente necesitaremos un poco de conocimiento HTML y CSS ( y si no esta este tutorial ;p)  y utilizar la web Google Fonts.

Google Fonts es una gran galería de google en la que podremos encontrar cientos de Fonts compatibles con blogger, pudiendo poner tantas como queramos pero tampoco sin abusar.

Lo primero iremos a Google Fonts:


Buscamos la fuente o fuente(s) que nos interesen, en mi caso he elegido Dancing Script. La ventaja de esta web es que podremos previsualizar el texto que queramos antes de instalar la fuente:


El siguiente paso, será darle al signo de +:


Veremos que abajo aparece una ventana confirmando la selección. Le daremos al icono - de color blanco:


La ventana se expandirá dando los códigos necesarios para instalar la fuente, NO LA CERRÉIS:


A continuación vamos a nuestro blog, a la pestaña Plantilla y Edición de HTML:


La sección que nos interesa es la que va DESPUÉS de :

 <head>


Cómo podéis ver yo ya tengo algunas fuentes instaladas, pero el proceso es el mismo. Deberemos ir a la página de Google Fonts, donde tenemos los códigos de la fuente y copiar el primer de ellos:
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
A continuación lo pegamos en nuestra plantilla:


Google Fonts tiene un fallo importante, y es que este código es erróneo para nuestro blog, y si quisiéramos guardarlo tal cual nos saldría este aviso:


Para solucionarlo, primero deberemos añadir el siguiente código entre "stylesheet" > :

type='text/css'/

Lo siguiente será cambiar las " por ' de tal manera que el código quedará así:


A continuación, buscamos la sección  < b:skin> y la expandimos:


Ahora buscaremos la parte de la plantilla dónde queremos tener la fuente. Yo la pondré en el título de la Sidebar/ Columna del blog, por tanto buscare:
#sidebar-wrapper-left h2{
Aquí veremos que, como en mi caso, ya tengo una fuente instalada.


Tanto si tenemos una instalada como si no, deberemos copiar/sustituir esta parte:
font-family: 'Poiret One', cursive;
Por este segundo código de la pagina de Google Fonts:
font-family: 'Dancing Script', cursive;
Y quedará así:


Finalmente Guardamos los cambios y...


RESULTADO FINAL

Espero que os haya resultado útil este tutorial, y si tenéis cualquier duda, dejadla en los comentarios ^3^.



2 comentarios :

  1. (✧∀✧)/ Holaaa!!!
    Justo antes de ayer trate de hacer esto pero con un tutorial de otro blog y no me resulto -.-!!! trataré de hacerlo con tu tutorial para ver que pasa gracias por compartirlo!

    穛 S4Ku SEK4i®

    ResponderEliminar
    Respuestas
    1. Yo tardé en descubrir porque fallaba y no cargaba la font...Espero que te ayude este tutorial y vea los resultados pronto ^^.

      Eliminar

Related Posts Plugin for WordPress, Blogger...