SERVICIOS - DISEÑO - FREEBIES - MEJORA TU BLOG -

17 dic. 2013

Cómo usar Otros tipos de letra par a nuestro blog! (Google fonts)

Normalmente Blogger dispone de unos tipos de fuentes limitados, pero tranquilidad, Google ofrece su servicio de Google fonts!!!! Ahora os explico cómo usarlo y poner el tipo de letra de nuestro blog más bonito y personalizado.

Iremos a  Google Web Fonts, y cogeremos la letra que más nos guste.

Una vez escogida la fuente, a bajo veremos algo así


Seleccionamos ''Use This Font''
 
Nos saldrá una pantallita en la que hay 2 códigos distintos

❀Código 1:
<link href=’http://fonts.googleapis.com/css?family=LA_QUE_HAYAMOS_ESCOGIDO rel=’stylesheet’ type=’text/css’

❀Código 2:
H1 { Font-family: ‘LA_QUE_HAYAMOS_ESCOGIDO’, arial, serif; }

Insertamos la fuente en nuestro Blog

Ahora vamos a Diseño -> Edición HTML, y buscamos (con Ctrl+f) la siguiente línea:
</head>

Justo encima pegamos el código 1, pero una cosita, al final del código ponedle una /, o sea que os quede así:
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'/>
(si no le ponemos la barrita blogger cree que nos hemos dejado el código a medias y rechaza el script.)

Bien ahora el código 2 solo utilizaremos la línea que dice:

''font-family'':
h1 { font-family: ‘ LA_QUE_HAYAMOS_ESCOGIDO’, arial, serif; }
Este código lo pegaremos donde queramos utilizar la fuente. Si quieres que el blog entero utilice esa fuente, por ejemplo pues lo pondrás en body, tal que así:


body {font-family: "
LA_QUE_HAYAMOS_ESCOGIDO" !important;}
 Ahora la decisión es tuya, yo solo puedo decir que este código hay que pegarlo antes de:
]]></b:skin>

Nota: Para usar la fuente, recordad que donde diga Font family tendréis que poner el nombre que aparecía en google fonts, vamos que os debería quedar algo así allí donde lo pongáis:

.post h3 {
font-family: LA_QUE_HAYAMOS_ESCOGIDO;
}

Como siempre espero que el tutorial sea de ¡muucha utilidad!
Besos.

5 comentarios:

  1. Hola, sólo quería añadir que ademas de Google existen otros servicios de fuentes (web fonts) gratuitos como, por ejemplo el de Adobe Edge Web Fonts.

    Saludos.

    ResponderEliminar
  2. Hola Lireth, yo tengo una dudilla que no consigo resolver!! A ver si como siempre me puedes echar una mano´
    Yo utilizo una de las fuentes de blogger porque me va bien, pero en el título de las entradas no consigo cambiarle el color y siempre me sale azul ohhhh....seguro que en el código html puedo cambiarlo pero sinceramente no tengo ni idea de donde??? lo mismo me pasa cuando quiero poner centrado el título de los gadgets en el sidebar, que no se donde tengo que tocar!!

    Como siempre mil millones de gracias anticipadas!
    Un abrazo
    Patricia

    ResponderEliminar
    Respuestas
    1. Te contesto vía mail en cuanto tenga un hueco (no suelo tardar) besotes :k

      Eliminar
  3. Hola Lireth, estoy intentando ya 2 dias en cambiar la letra de mi blog pero no me sale,xfa haber si me puedes ayudar xfis!!!
    muchas gracias <3 <3

    ResponderEliminar