8 mar 2013

Cómo usar una fuente de Google Web Fonts

|

Si bien Blogger tiene algunas fuentes preinstaladas, también podemos agregar tipografías personalizadas. En esta entrada voy a explicar cómo hacerlo usando Google Web Fonts (hay otros, pero este es el que considero más completo y más fácil de usar).

Pasos a seguir

1.  En primer lugar, tendrás que elegir la fuente que quieras usar para tu blog: debes hacer click en 'Add to collection' (yo elegí la que se llama Sintony)

2.  Después de el paso anterior te aparecerá un cartel azul; tenés que hacer click en donde dice 'Use'

3.  Ahora habrá distintas variaciones de la fuente, elegí la que más te gusta

4.  Más abajo aparecerán dos códigos como estos:

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

font-family: 'Sintony', sans-serif;

El primer código lo tendrás que pegar antes de </head> agregando una barra " / " antes del cierre. Quedaría así:

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

El segundo hará falta agregarlo antes de ]]></b:skin en la zona que quieres que se aplique el cambio de la fuente: .main-wrapper (que serían las entradas), .sidebar-wrapper (la sidebar), etc. Veamos algunos ejemplos:

Si quiero que la fuente se aplique a las entradas usaré el siguiente código:

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

Si quiero usarla en la sidebar entonces será este:

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