Como fazer um template para o Blogger - Parte II

Variáveis do tipo Font
Continuando a série, vamos ver agora a criação de variáveis do tipo font. Ao analisarmos o código do nosso blog de testes, podemos ver:
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
Antes de alterarmos as fontes que se apresentam nas variáveis, é preciso entender primeiro alguns conceitos básicos:

Uma fonte qualquer só é visível se o navegador reconhece esta font, ou seja, é necessário que o leitor tenha esta font gravada em seu computador, caso contrário não irá vê-la. Existe uma infinidade de fontes das mais variadas, porém, não são muitas as que são comuns à todos os usuários. O que devemos fazer é estabelecer uma lista de fontes que podem ser reconhecidas pela maioria dos navegadores, separando-as por vírgulas e obedecendo a regra:

Fontes com nomes duplos precisam vir entre aspas, ex: "Trebuchet MS";

O navegador exibirá ao leitor a primeira fonte que ele reconhecer de uma lista.
Toda lista deve terminar com uma fonte genérica (serif, sans-serif, monospace, cursive e fantasy.) Você pode conferir os tipos de fontes genéricas clicando aqui.
Voltando a nossa variável bodyfont:
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
tal qual as variáveis color, precisamos respeitar a sintaxe que se apresenta para a criação de uma variável do tipo font: nome da variável sem espaços, descrição da variável, valores para default e os valores que desejamos aplicar à propriedde fonte. Vamos analisar separadamente o trecho que nos interessa:
value="normal normal 100% Georgia, Serif">
Neste primeiro normal estabelecemos o estilo da fonte (font-style), que pode ser normal, italic e oblique. No segundo normal estabelecemos o quão escura será esta fonte (font-weight) e o valores possíveis são esses:

1. normal
2. bold
3. bolder
4. lighter
5. 100
6. 200
7. 300
8. 400
9. 500
10. 600
11. 700
12. 800
13. 900

ou seja, se desejamos, neste caso, que a fonte do texto de nossa página se apresente em negrito e no estilo italic, devemos colocar:
value="italic bold 100% Georgia, Serif">
Faça a modificação e clique em visualizar. Deve ficar assim:

value="italic bold 100% Georgia, Serif">
100% refere-se ao tamanho da fonte, que também pode ser estabelecido em pixels. Georgia é o nome da fonte escolhida para a página e Serif a fonte genérica (fontes normais com serifa). No caso de algum navegador não reconhecer a fonte Georgia, automaticamente irá buscar uma fonte da familia Serif para mostrar ao leitor.
Vamos ver a variável headerfont que se apresenta no código do seu template:
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
Veja que aqui várias fontes foram listadas e devem ser apresentadas na ordem em que estão; ou seja, se o navegador do usuário não encontrar na memória do computador a primeira fonte, usará a segunda e assim por diante.
As variáveis do tipo font no template Mínima são bodyfont, headerfont, pagetitlefont,descriptionfont e postfooterfont. Vamos criar uma nova variável do tipo font, para exercitar:
<Variable name="sidebartitlefont" description="Titulo da Sidebar"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 100% 'Palatino Linotype', 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
Veja que criei a variável sidebartitlefont com a seguinte descrição: 'Título da Sidebar' e estabeleci que a letra será normal e em negrito, tamanho 100% e que a primeira font a ser procurada pelo navegador deverá ser a Palatino Linotype (note, está entre aspas), e na falta dela, Trebuchet MS e assim por diante.
Vamos agora colocar esta variável no titulo da sidebar.
No template mínima não existe a regra css para o título da sidebar. Ela está genericamente definida na propriedade h2 para todos os seletores. O que vou fazer é dar valores diferentes para a propriedade h2 do seletor Sidebar, criando a regra:
.sidebar h2{
font: $sidebartitlefont; }
Coloque este trecho no código do seu template, junto às outras regras para sidebar, para facilitar a busca posteriormente.

Salve as modificações e visualize (se já tiver inserido algum elemento na sidebar, logicamente), e veja a variável em ação.
Você pode criar quantas variáveis do tipo fonte que desejar mas eu particularmente não costumo nem usá-las em meus templates e blogs. Prefiro definir os valores diretamente na regra css para cada seletor, desta maneira:
.sidebar h2{
font-size: 100%;
font-weight: normal;
font-family: 'Palatino Linotype', 'Trebuchet MS', Sans-Serif;
color: #000000;
}
Todos os valores possíveis para a propriedade font, bem como a ordem em que devem ser apresentados, podem ser conferidos aqui.
Como lição de casa :-) se utilize das informações sobre os valores da propriedade fonte para modificar o titulo da sidebar, sem se utilizar de variáveis. Faça como neste último exemplo, alterando o tamanho, cor, estilo e tipos de fontes. Não tenha receio de tentar: enquanto não se clica em salvar, você pode apagar o que fez quantas vezes desejar, clicando em Limpar Edições. Teste todos os valores apresentados na página do Maujor, para ir conhecendo e se familiarizando com cada um.