Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Acessórios Fontes Vanessa S.

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:


<Group description="Blog Title" selector=".header h1">
<Variable name="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.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

9 Comentários

  1. Mas como usa-las na postagem em algumas palavras tipo: Eu quero colocar só algumas palavras com essa letra nas postagens, ja tentei pelo código mais a única que é diferente e deu certo é a BadaboomBB mais e se eu quiser outra?

  2. .:: Clau ::. disse:

    Congregacao Shallom – Tenoné
    É só seguir os passos deste tutorial.

  3. Congregacao Shallom - Tenoné disse:

    Ola! Desejo mudar a fonte do título do bloger para o estilo ALGERIAN, tem que ser feito diretamente no designer. Como faço essa alteração? Obrigado.

  4. Sir Kdell (Cristian Delgado) disse:

    Clau,desculpe lhe perguntar,mas não entendi como se define a fonte.
    Estou a usar seu template dark blue,como teria de modificar? Mais uma vez obrigado 😀

  5. .:: Clau ::. disse:

    Isabelle
    Dá uma lida neste artigo:
    https://www.mundoblogger.com.br/2010/06/widget-menu-de-icones-sociais-no-rodape.html
    Procura tb o artigo falando sobre o Addthis que temos publicado.

  6. Isabelle Munhós disse:

    Olá!
    Eu adoro esse blogger, mas não encontrei o que eu estou virando e revirando a internet, se vocês pudessem me ajudar…
    Bem, Sabe os ícones do tipo 'tweet this post', 'share this post', etc, que ficam no rodapé? Então! Eu quero mudar o original do blog. Eu criei ícones e gostaria de colocá-los, pois meu blog tem uma fonte muito específica.
    Me ajudem, estou louca atrás de respostas :/

  7. Desordeiro disse:

    Muito legal esse post
    Adoro seu blog, ja me ajudou muito.
    Depois vou dar uma testada com esse dai tbm.
    Obg Clau

  8. .:: Clau ::. disse:

    Luis Henriques
    Já tem tutorial sobre isso. Procure o artigo sobre aplicar estilos a página inicial.

  9. Luis Henriques disse:

    Clau deu uma procurada na sua lista de tuturias e não encontrei então resolvi te perguntar.

    Me desculpe se você já postou isso mais realmente não encontrei.

    Como você faz para por uma imagem para dividir as postagens resumidas na página inicial.

    Eu queria muito fazer isso ja tenho até a imagem, mais não sei como.

    Onde devo alterar o background?

    Abraço do seu fã! ;D

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.