Fuentes

2008-05-15T19:55:00.006+02:00

En este blog os voy a mostrar las posiblidades de fuentes que tenemos, aunque de origen no vengan en el código.

He elegido este modelo de plantilla por ser la que menos variables tiene en este sentido, solo una, con lo que todo el blog tiene la misma letra.
Y si tienen colores distintos es por que en las variables de colores si que hay alguna que hace cambiar este aspecto, pero en cuanto a fuentes, es la más uniforme que hay, así que si eliges que tu blog use, por ejemplo, la fuente Arial en negrita, todo el blog aparecerá en esta fuente.

Pero puedes cambiar esto.

En la cabecera ya puedes ver que hay dos modelos de letra distintos, al igual que en las entradas y en la sidebar.

Para lograrlo le he añadido tantas variables como posibilidades de letra tengo.

El sistema es super sencillo.
Copias la única variable de fuente que hay, que se ve así

<Variable name="bodyFont" description="Text Font"
type="font" default="normal normal 100% tahoma,
'Trebuchet MS', lucida, helvetica, sans-serif">

y la pegas debajo tantas veces como quieras.
Luego a cada una le cambias el nombre y la descripción.

Y después en cada sitio del código donde ponga font-size, añades la variable. Para ello dejas esta línea así:
font: $nombredelavariable;
Por ejemplo, si has añadido una headerFont para el título, tendrías que escribir
font:$headerFont;

En la siguiente entrada verás como.

Esta es la Post Title Font

2008-05-14T19:45:00.002+02:00

Encima del título de la entrada puedes ver la Date Header Font.

Esta entrada y todas las demás, está escrita con la Text Font.

Debajo de la entrada puedes ver la Post Footer Font.

Paso a explicarte donde he añadido cada una para que se vean así.
Ten en cuenta que estas indicaciones son para esta plantilla. Si la tuya es otro modelo estarán en lugares parecidos pero quizá no iguales.
Para saber donde has de colocarlas, has de encontrar las descripciones que correspondan a los lugares concretos.

Las de la cabecera.
El título: Variable name="headerFont" description="Header Font" está colocada en #header h1 {

Fuente usada: Georgia, negrita.
El subtítulo: Variable name="descriptionFont" description="Description Font" está colocada en #header .description {

Fuente usada: Verdana, negrita, cursiva.

Las de la entrada.
La fecha: Variable name="dateHeaderFont" description="Date Header Font" está colocada en h2.date-header {

Fuente usada: Times, cursiva.

El título de las entradas: Variable name="postTitleFont" description="Post Title Font" colocada en .post h3 {

Fuente usada: Trebuchet, negrita.
La letra de las entradas: Variable name="bodyFont" description="Text Font" (esta es la original) está colocado de origen en #outer-wrapper {

Fuente usada: Verdana.
El pie de las entradas: Variable name="postFooterFont" description="Post Footer Font" está colocada en .post-footer {

Fuente usada: Arial, cursiva.

Las de las columnas laterales.
El título: Variable name="sidebarTitleFont" description="Sidebar Title Font" está colocada en .sidebar h2 {

Fuente usada: Courier, negrita.
El texto: Variable name="sidebarTextFont" description="Sidebar Text Font" está colocada en #sidebar { en #newsidebar { y en #widebar {

Fuente usada: Times.

En este caso, al decirle en .sidebar h2 que el título tiene una fuente distinta, ya salen todos los títulos igual, pues las tres columnas tienen las mismas propiedades, ya que en el HTML las tres tienen esta misma definición: section class='sidebar'

Hubiese podido añadir una variable más para la menubar, añadiéndole la variable menubarFont, y la orden en #menubar li { e incluso otra en el footer, con el nombre footerText, y la orden en #footer { pero me parece que ya queda claro ¿no?

¡Ah! Si te gusta la widebar (lo que ves encima de las dos sidebars) aquí explico como añadirlo al blog.

Muestras de fuentes - Esta es la Header Font

Fuentes

Esta es la Post Title Font