Cómo utilizar las fuentes personalizadas de Google en Blogger

En Blogger solo podemos utilizar las fuentes habituales disponibles en la mayoría de los de ordenadores (Arial, Courier, Georgia, Impact, Times New Roman, Trebuchet y Verdana).

Esto es así porque, aunque nosotros tengamos instaladas en nuestro PC muchas más fuentes y podamos incluso aplicarlas a nuestro blog, nuestros lectores se limitarán a ver solamente las fuentes que ellos tengan instaladas en su PC.


Eso puede cambiar si utilizamos Google Font API que nos permite utilizar las fuentes disponibles en su Directorio de fuentes en nuestro blog sin importar que fuentes o no tienen instaladas nuestros lectores en sus ordenadores, pues la La API de Google utiliza fuentes que están alojados por Google.

Un ejemplo online podéis verlo en el título del Escaparate, donde hace tiempo utilizo la fuente Droid Serif.


[1] Vamos al Directorio de fuentes y vemos allí la lista de fuentes disponibles.

[2] Pinchamos sobre la fuente que nos interese y después en Preview this font para probar el efecto de algunas de las propiedades que pueden aplicarse a la fuente (tamaño de la letra, espaciado, sombra, etc.).

[3] Para obtener el código que necesitamos, pinchamos en "Get the code" (destacado en azul).
Antes de copiar el código marcamos las casillas para las variantes (Normal, itálica, negrita, negrita itálica) si es que la fuente elegida las proporciona.

[4] El código resultante y que hemos de copiar, será algo como esto:

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

Nota:

Antes de usar el código en Blogger tendremos que añadirle la barra de cierre final para que lo admita:

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

[5] Pegamos el código antes de la etiqueta </head> de nuestra plantilla.

[6] Para aplicar el tipo de fuente, añadimos en el CSS según donde vamos a utilizarlo lo que en el directorio se nos indica:

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

[7] Utilizando una plantilla Mínima de Blogger por ejemplo, lo usaríamos así en el título de nuestro blog:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font-family: 'Cantarell', arial, serif;
}

Y de esta manera en el título de nuestras entradas:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-family: 'Cantarell', arial, serif;
line-height:1.4em;
color:$titlecolor;
}