Las fuentes de los textos en Blogger

Parece haber algo de confusión respecto al uso de las fuentes de textos en Blogger. Por defecto, una plantilla incluye una serie de fuentes que se usarán en el blog y están definidas de forma un poco extraña, utilizando nombres de variables internas:

$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

Pueden verse dentro de la definición de estilo (entre las etiquetas <b:skin> y </b:skin>), por ejemplo:

#outer-wrapper {
     width: 660px;
     margin:0 auto;
     padding:10px;
     text-align:left;
     font: $bodyfont;
}

font: $bodyfont; no es una forma standard de escribir una propiedad CSS, es una particularidad de Blogger que está asociada con la posibilidad de modificar estos datos desde la solapa DISEÑO / FUENTES YCOLORES:

Allí, podemos desplazarnos por la lista de la izquierda y seleccionar alguna de las opciones y previsualizar el efecto en una ventana temporal.

En la plantilla, todas esas opciones de FUENTES Y COLORES, están definidas al inicio y, si queremos, podemos modificarlas manualmente o agregar otras personales, dándoles un nombre, una descripción y estableciendo los valores que queramos.

<Variable
     name="bodyfont"
     description="Text Font"
     type="font"
     default="normal normal 100% Trebuchet,Verdana,Sans-serif"
     value="normal normal 100% Trebuchet,Verdana,Sans-serif">

default contiene las propiedades por defecto
value contiene las propiedades actuales

Los valores se corresponden con estas propiedades CSS:
font-style font-weight font-size font-family
para más detalles sobre estas propiedades, ver CSS y los textos (Parte 1).

Pero, volvamos al tema de las consultas ¿cómo cambiar las fuentes? ¿qué fuentes puedo utilizar?

Si vemos la solapa FUENTES Y COLORES, sólo hay seis posibilidades:

Arial [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
Georgia [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
Trebuchet MS [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
Courier [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
Times New Roman [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
Verdana [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]

¿Hay más? La respuesta es si y no. En realidad, podemos utilizar cualquiera sin embargo, la fuentes que serán visibles dependerán de las que tenga instaladas el visitante en su computadora; si nosotros elegimos una fuente especial y quien mira el sitio no dispone de ella, el navegador buscará otra, por defecto, aquella que hayamos establecido en las opciones generales de internet que, por lo general, es "Times New Roman".

Es por eso que, por un lado, debemos evitar usar fuentes especiales y por otro, en lugar de establecer una sola fuente, lo que normalmente hacemos es poner una lista separada por comas para que, si no se encuentra la primera, se intente con la siguiente y así sucesivamente.

Aunque no es usual, también es posible definir una fuente especial y permitir que los visitantes la utilicen, descargándola a su PC (embedded fonts):

<style type="text/css">
     @font-face {font-family: 'nombreFuente' src: url(direccionURL);}
</style>

Si no queremos utilizar las variables provistas por Blogger debemos cambiar la sintaxis de la propiedad:

font-family familia | familia genérica, [nombre]

Esta propiedad indica el nombre de la fuente o asigna múltiples fuentes separadas por comas.
Los nombre con espacios intermedios (por ejemplo "New Century Schoolbook") deben ser escritos entre comillas dobles o simples.

A la lista de fuentes normales, podríamos agregarles:

Comic Sans MS [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
Tahoma [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
Lucida Grande [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
Helvetica [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]

Podemos indicar el nombre de la fuente (Times, Helvetica, Zapf-Chancery, Western, Courier) o su nombre genérico:

serif (por ejemplo Times) [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
sans-serif (por ejemplo Arial o Helvetica) [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
cursive (por ejemplo Zapf-Chancery) [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
fantasy (por ejemplo Western) [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
monospace (por ejemplo Courier) [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]

La sintaxis a utilizar sería la siguiente:

P {font-family: Arial, Helvetica, sans-serif;}
H3 { font-family: 'New Century Schoolbook', Times, serif }

En ambos casos, se asigna un tipo de fuente y otro alternativo; sin embargo, como ambos pertenecen al mismo tipo genérico, también se agrega este último; si el navegador no encuentra las fuentes exactas, buscará una similar, basándose en ese tipo genérico.

Hay otras valores que pueden incluirse el propiedad pero no son comunes, todos hacen referencia a las fuentes utilizadas por el sistema operativo:

caption [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
la fuente establecida en los botones y etiquetas
icon [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
la fuente establecida en en los íconos
menu [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
la fuente establecida en en los menúes
message-box [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
la fuente establecida en las cajas de diálogo
small-caption [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
la fuente establecida en los controles
status-bar [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
la fuente establecida en en la barra de estado