Usar Google Web Fonts en Blogger

Google Web Fonts es un listado de fuentes bastante atractivas las cuales permiten mejorar mucho el diseño. En este caso utilizaremos las Google Web Fonts en Blogger.


Debes saber bien que estas fuentes puedes también descargarlas para utilizarlas en programas de edición como Adobe Photoshop, pero en este tutorial enseñaré cómo añadirlas a Blogger.

¿Cómo añadir estas fuentes en Blogger?

Paso 1: Escogiendo la fuente:

En el caso de los ejemplos utilizaré la fuente ''Ubuntu''.

Para elegir la fuente deseada, debes ir a Google Web Fonts,  hacer clic en la que más te guste (En mi caso Ubuntu):

Una vez escogida la fuente, veremos distintas opciones:

Seleccionamos ''Use This Font''. Una vez realizado esto, veremos que habrán distintas opciones para configurar las variables, puedes omitirlas si te gusta la fuente por defecto.

Verás 2 códigos en esta sección:

Código 1:

Código 2:

Paso 2: Insertando las fuentes en el Blog:

Ahora vamos a ''Diseño | Edición HTML'', en donde buscamos la siguiente línea:

</head>

Arriba de ésta, pegarás el código 1, pero antes deberás editarlo añadiendo un ''/'' (sin los apóstrofes), en la siguiente zona del código:

<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'/>

Esto es para que la plantilla no rechaze el código del script.

Ahora con el código 2, nos quedaremos sólamente con el atributo ''font-family'':

h1 { font-family: 'Ubuntu', arial, serif; }

El resto lo eliminamos, de tal forma que nos quedemos con un código similar a este:

font-family: 'Ubuntu', arial, serif;

Este código deberás pegarlo en donde quieras, si quieres que esta fuente afecte a cada una de las secciones de tu blog, pégalo en las zonas como content-wrapper, header-wrapper, main-wrapper, etc.

Veamos un ejemplo:

#main-wrapper {
font-family: 'Ubuntu', arial, serif;
}

#sidebar-wrapper {
font-family: 'Ubuntu', arial, serif;
}

Sidebar-wrapper y main-wrapper corresponden a la sidebar y zona de entradas respectivamente.

Éste atributo deberás pegarlo antes de la siguiente sección de tu plantilla:

]]></b:skin>

Consideraciones: 

No es necesario crear las variables como ''content-wrapper'', si éstas existen, puedes pegar el código 2 en ellas entre los atributos existentes, veamos un ejemplo para que quede claro:

#content-wrapper {
margin-top: 20px;
padding:20px;

font-family: 'Ubuntu', arial, serif;

background: #fff;
width: 910px;
}