13. Modificar Fuentes y colores

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

El color del texto en blogger

El color del texto en blogger; este articulo va dedicado para los más caprichosos que les gusta tener múltiples colores en su blog y como no!!! en sus textos..... aunque nunca os debeis de olvidar de la premisa del buen creador que es sencillez!!!! Múltiples elementos y múltiples colores impiden al visitante centrarse en el texto. Distrae su atención.
Una vez hecha esta salvedad manos .....al blog!!!
Para los más rezagados...Donde podemos editar el color de los textos en en blogger?? Vamos allá

Primero nos dirigimos a la pestaña plantilla(1º) veremos en el menú varios apartados elegiremos Fuentes y colores (2º) al elegir este apartado ya tendremos la visualización de la imagen. Hemos accedido al lugar donde se editan las fuentes y colores.


3º.-Como veis cada parte del texto se puede personalizar con colores diferente tan sólo debereis
Situaros encima de la parte que querais cambiar y dirigiros a la tabla de colores(4ª) automáticamente vereis en la previsualización del blog los cambios de color en la fuente.
Tan sólo es cuestión de ir probando y conseguir el efecto que deseeis.


4º.-Esta es la tabla de colores que nos ofrece blogger para el color de la fuente, sólo se pueden utilizar estos colores.


5º.-Previsualización del blog; Aqui podreis ver los cambios sin necesidad de salir de esta pestaña.

Cuando acabeis con vuestros cambios no os olvideis de darle al botón de guardar cambios. Podreis observar que también se editan las fuentes desde aquí pero este no es el motivo del post.
Hasta aqui la primera parte del post