Utilizar otras fuentes o tipos de letra no estándar en Blooger

De momento, me inclino por Google Fonts ya que es una muy buena opción mientras existan navegadores que no soporten @font-face o no tengamos un buen sitio dónde alojar las fuentes.

Dispone de un montón (ahora mismo 629 familias) de tipografías libres que puedes ir filtrando por familia, grosor del trazo, inclinación o ancho, hasta encontrar la que te guste.

@font-face todavía no es soportado por varios navegadores; dependiendo del navegador, las letras aparecerán de diferentes maneras.

Luego con una simple línea en tu plantilla, ya tendrás la fuente disponible.

La integración con @font-face está planificada (aunque no confirmada) para los navegadores Firefox 3.1 y Opera 10.

Para utilizar una fuente de Google Fonts hemos de seguir los siguientes pasos:
 Por supuesto, lo primero que hacemos es elegir la fuente. Para ello podemos elegir visualmente la tipografía mediante una vista preliminar en el contexto de una palabra, de una frase, de un párrafo o a través una pequeña vista preliminar de cada una según la opción que pinchemos en el menú superior.



Para refinar la búsqueda, podemos elegir en el menú de la izquierda las características que ha de cumplir la fuente que buscamos: Categoría, grosor, inclinación y envergadura. El filtro utiliza el operador de comparación "Y" por lo que no tiene mucho sentido utilizar todos si no es para algo muy concreto.

La interface de Google Fonts nos permite hacer pruebas con el texto concreto que vamos a utilizar en la realidad y en el contexto lo más parecido a la misma mediante la navegación mediante los botones superiores tanto en la pantalla "Choose" como en la "Review" que podemos elegir en la parte inferior. Para tener en cuenta una fuente de cara a comparativa o elección, damos al botón "Add to Collection" que hay junto a la fuente.

Una vez decididos, damos al botón inferior derecho "Use". Veremos varias consideraciones útiles como que cada estilo de cada fuente penalizará la velocidad de carga a nuestros lectores por lo que es recomendable minimizar la selección de fuentes a lo imprescindible.

Introducimos el siguiente código que nos facilita Google Fonts en la última pantalla "Use" justo antes de la etiqueta </head>.

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

Para utilizarla, se hace simplemente con esta estructura:

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

Como la vamos a querer utilizar varias veces en el blog, es recomendable declarar el estilo en la zona CSS de la plantilla. Por ejemplo, si queremos que los encabezados de nivel <h1> la utilicen, modificamos el estilo de nuestra plantilla de esta manera
Por ejemplo, mi plantilla tenía esta definición para el título:

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

Y a continuación he rodeado el código que quiero reemplazar con "/*" y "*/"; en otros sitios he visto que hablan de borrar las líneas de código pero yo, debido a mi experiencias personales, prefiero convertir el código a formato "comentario" por si algún día decido recuperarlo sin tener que andar restaurando copias de seguridad.
Finalmente y por supuesto, he añadido la línea "font-family: ‘ Inconsolata’, Arial, serif; font-weight: 40;" para indicar al navegador que se utilice preferiblemente la fuente "Inconsolata" con un tamaño de 40 pixeles.

.Header h1 {
/*font: $(header.font);*/
/*Tipografía del título*/
font-family: ‘ Inconsolata’, Arial, serif; font-weight: 40;
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

Ahora, según este ejemplo, todas las partes del blog que utilicen <h1> presentarán el texto con la fuente "Inconsolata" con una altura de 40.

Espero que se entienda y que sea útil.