Variáveis de Fonte!

Vamos continuar falando um pouco mais de variáveis...No post anterior vimos variáveis de cor hoje veremos um pouco das variáveis de fonte. São quase iguais tem o mesmo papel fazer com que a troca de fonte seja concretizada pelo painel sem a intervenção via "HTML ou CSS". Vamos ver como elas são formadas:
<Variable name="bodyfont" description="Fonte da página" type="font" default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
name, description -> Como foi visto no post anterior elas são nome que será usada para defini-la no CSS e uma descrição para aparecer no painel. Lembrando também que não deve ser utilizado caracteres especiais ( ?,!,@). O nome o atributo name deve ser único.
type="font" -> Se tratando de fonte sempre usaremos font que a palavra fonte em inglês.
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" -> Este atributo define que se o usuário não escolher nenhuma fonte está será padrão.
value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" -> Este valor será definido pelo painel. Caso não seja definido será igual ao atributo "default".

Aplicando ao CSS

A aplicação é da mesma forma utilizada pelas cores só mudamos o atributo "name". Mas por via das dúvidas veja o exemplo:
body {
  font: $bodyfont;
}

Como fica no CSS

Se colocasse-mos apenas isso no CSS ficaria assim:
<b:skin><![CDATA[/*
/* Variable definitions
====================
<Variable name="bodyfont" description="Fonte da página" type="font" default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
*/
body{
background: $bgfont;
}
]]></b:skin>
Agora podemos visitar o nosso painel e alterar a fonte sem medo de errar...