Añadir más fuentes en Blogger

Desde que empecé este blog nunca estuve contento con los tipos de fuentes de texto que deja escoger Blogger. Son míseras 6 fuentes las que puedes escoger: Georgia, Arial, Trebuchet, Courier, Times y Verdana.

Con Georgia fue con la que empecé, no esta mal como tipo de letra pero es demasiado clásica quizás.
Arial y Times están demasiado vistas ya.
De Courier mejor no hablamos, está pa lo que está, no como tipo de letra de un blog.
Verdana, psss... tiene las letras demasiado grandes y anchas para mi gusto.
Trebuchet me gusta, es la que más tiempo ha estado en este blog pero misteriosamente se ve horrible en Firefox.

¿Pero por qué Blogger sólo deja escoger entre estas 6 fuentes? Pues porque cualquiera de estos tipos de letra se mostrará correctamente en cualquier ordenador, tenga el sistema operativo que tenga. Aquí teneís una guía de las fuentes preinstaladas en Linux, Mac y Windows.

Pero vamos al grano ¿Se pueden añadir más fuentes de texto en Blogger? Sí. Hasta ahora la única manera de añadir otra fuente alternativa a las mencionadas 6 que nos ofrece Blogger era escribiendo la entrada en el modo html y en el atributo "font-family" poner nosotros la fuente que queramos como se puede ver en el ejemplo:

<span style="font-family: Helvetica;">Texto del post</span>
 

Tenéis que tener en cuenta que la fuente será visible por el usuario si la tiene instalada en su ordenador. Si queremos añadir más fuentes a todas las partes del blog y no solo al texto de la entrada tendremos que modificar el código fuente de nuestra plantilla en Blogger.
Las variables de los tipos de fuentes y colores están definidas al princpio, podremos modificarlas o incluso añadir alguna nueva. Por ejemplo os pongo la variable que me he creado yo para la fuente del título de las entradas:

Variable name="fuentetitulo" description="Tipo letra título posts" type="font" default="normal normal 140% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 154% 'URW Gothic L', Georgia, Arial, sans-serif"
 

Dentro del campo "value" es donde definimos las fuentes que queremos. Si os fijáis aparecen tres tipos de letra seguidos, esto es por lo que os comentaba antes de que alomejor no tenéis ese tipo de fuente instalado en vuestro ordenador, pues entonces lo intenta con la siguiente de la lista. De esta manera, en el ejemplo que os he puesto, como seguro que casi nadie tiene instalada la fuente "URW Gothic L" ya que es un tipo de fuente Ubuntu lo intenta con la siguiente, Georgia, que sé que todo el mundo la tiene.

En la plantilla de Blogger hay varias variables que definen los tipos de letra:

Bodyfont determina la fuente del texto (el tipo usado genéricamente).
Headerfont determina la fuente de los títulos de la sidebar.
Pagetitlefont determina la fuente del título del blog.
Descriptionfont determina la fuente del texto de la descripción del blog.
Postfooterfont determina la fuente del pie de página de cada entrada.

Se trata de que viendo el ejemplo anterior modifiquéis estas variables a vuestro antojo para mostrar las fuentes de texto que más os gustan.

La variable que he creado yo anteriomente, "fuentetitulo", como es nueva tenéis que indicar en vuestra plantilla donde queréis usarla. Como es para el título de los posts la pondríamos aquí:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
font:$fuentetitulo
}

Seguramente, al igual que a mi, os surja la pregunta de ¿y como se verá mi blog en Internet Explorer? ¿O como ser verá en Windows con Mozilla? Para comprobarlo, existe una página que os mostrará una imagen de la apariencia de vuestro blog o sitio en todos los sistemas operativos y navegadores con sus diferentes versiones.

Espero que os haya aclarado un poco sobre las tipografías en Blogger, que a mi la verdad me traían loco al principio. Como no soy un experto en la materia y no se si me explico bien del todo seguro que os surge alguna duda, no dudéis en preguntarme.

---

Nota: La entrada las fuentes de los textos en Blogger escrita en Vagabundia me ha sido de gran ayuda.

Entradas relacionadas:
Freshfonts: Tipografías con Ketchpu