Fontes da Web disponiveis no Blogger

Há um tempo atrás eu publiquei um artigo falando sobre novas fontes da web disponibilizadas pelo Google API para serem usadas no Blogger.

Atualmente o Blogger disponibilizou novas fontes da web que podem ser usadas no seu blog, bastando apenas escolher a fonte e altera-las diretamente pelo painel de controle do próprio Blogger.
Essas novas fontes estão disponíveis nos templates padrões Designer de Modelo, bem como nos templates Minima.

O processo de alterações de fontes do blog é bem simples, porém, só será possível alterar as fontes se o modelo do seu template tiver pré definições para o CSS, as chamadas Variable Definitions.
Se você não sabe o que são Variable Definitions, recomendo que você leia o artigo que trata sobre o assunto para poder prosseguir com este tutorial.

Se no seu modelo de template as Variable Definitions não estiverem estabelecidos, você poderá criá-las para conseguir definir suas próprias variáveis e assim, alterar as fontes do seu blog, através do painel do Blogger.
Veja como criar Variable Definitions do tipo Fonte no artigo: Como Criar Variáveis do tipo Fonte

Como Usar fontes da web no Blogger

Se quiser trocar o tipo ou tamanho de fonte, poderá faze-lo diretamente pelo painel do Blogger.
Clique na aba "Design >> Designer de Modelo >> Avançado".
Escolha qual a fonte que você quer trocar.
No exemplo abaixo eu optei por trocar a fonte do titulo do Blog (que fica no cabeçalho):



No meu exemplo, eu escolhi a fonte "Grafty Girls" e determinei o tamanho dela em 42px.
Veja como ficou a fonte do cabeçalho do meu blog de testes:




A nova fonte só será reconhecida pelo código, se já houver pré-definição Variable Definitions do tipo Fonte no seletor desejado.
No meu exemplo, eu alterei a fonte do Titulo do Blog.
No código CSS referente a Header, a fonte já estava pre-definida desta forma:

.Header h1 {
font: $(header.font);

E em Variable Definitions estava defina assim:

Blog Title" selector=".header h1">
  header.font" description="Title Font" type="font"
      default="normal normal 36px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 42px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

No exemplo acima eu usei como referencia o código do template Designer de Modelo (Modelo Janela de Imagem).


Lembre-se: para que a nova fonte funcione é preciso definir onde a fonte deverá ser aplicada, para que a nova fonte fique visível no blog.
Você precisará incluir os valores "font" diretamente na regra CSS na propriedade do seletor onde você deseja usar a nova fonte.