Blogger: Usando fontes personalizadas | Follow your dreams
Blogosfera

Blogger: Usando fontes personalizadas

Olá dreamers,
Vocês já conhecem o Google Web Fonts? É mais uma das facilidades maravilhosas da Google (I ♥ Google), um site com fontes de todos os tipos que você pode usar no seu blog apenas colocando o código no template. É super fácil, vamos lá?

 

Exemplo usando a fonte “Julius Sans One”:


ATENÇÃO: Antes de começar certifique-se de que salvou uma cópia do seu template por segurança.

 

  • 1 – No site http://www.google.com/fonts/ escolha a fonte que deseja usar e clique em Add to Collection. Para esse tutorial escolhi a fonte “Julius Sans One”.


A fonte será adicionada à sua coleção, agora clique em Use.

 

  • 2 – Na página que aparecerá escolha a opção Javascript e copie todo o texto dentro da caixa branca.

 

  • 3 – Vá no painel do seu blog, na aba Modelo e clique em Editar HTML. Cole o código copiado no passo acima exatamente após o trecho <head>. No meu caso ficou assim:

  • 4 – A fonte já está “instalada” no template, agora vamos especificar onde ela aparecerá. Volte na página do Google Web Fonts e copie o código que está abaixo do Javascript que você copiou no 2º passo. No meu caso é esse:


Esse é o código que determina a fonte utilizada.

 

  • 5 – Vá novamente na página Editar HTML e cole esse código onde deseja que a fonte apareça. Se você não sabe como fazer isso siga o passo 6, se já sabe pule para o passo 7.

 

  • 6 – Para esse tutorial vou colocar a fonte “Julius Sans One” nos títulos dos posts. Pesquiso por “post h3” e incluo o código depois do {
    Ficou assim:

Exemplos
Se você quiser que a fonte apareça:
– Nos títulos dos posts pesquise por “post h3
– Nos títulos da barra lateral pesquise por “h2
– No link para os comentários pesquise por “comment-link
– No texto que indica a quantidade de comentários (que fica acima na área de comentários) pesquise por “h4

Cada template tem suas nomenclaturas e nem todos são iguais. No seu o título dos posts, por exemplo, pode não se chamar “post h3″, e por isso o tutorial não vai funcionar pra você. Nesse caso é preciso descobrir que nome foi utilizado no seu template e então incluir o código da fonte.

 

Observações importantes
– Se no local onde você incluiu o código já existir uma linha “font-family” apague-a ou substitua pela nova. Não deve existir duas pois não funcionará corretamente.
– Se tiver mais de um trecho (post h3, h2, etc) inclua o código em todos.
– Em qualquer um desses exemplos inclua o código sempre após o {

 

  • 7 – Pronto, agora é só visualizar para checar se está tudo certinho e salvar.

 

Alguma dúvida? Comente e eu farei o possível para ajudar. :)
Até mais!

Tags : Blogger

39 Comentários

  1. Oi, conheci o seu blog hoje e já peguei o theme preto e branco e estou me atualizando de todos os seus tutoriais. Mas estou com um probleminha, coloquei uma fonte diferente como você mostrou aqui, agora como faço pra por uma outra fonte só que apenas no título do post?

  2. Oi Karoline, vim pedir uma ajudinha tua!
    Eu queria usar uma das fontes pra trocar pelo título do blog, inclusive estou usando um dos templates que tu disponibilizou e eu não sei qual é o código para achar o título/nomedoblog.
    Agradeço a atenção e por todas as informações úteis que tu compartilha!!
    Bjs

  3. Oi Karoline, estou usando um template seu e usei o tutorial pra mudar o título das postagens, fiz tudo direitinho e nada mudou :(

    1. Oi Rhayane, os títulos das postagens no meu template gratuito não é “post h3″, e sim “entry-title”. Onde você incluiu o código?

  4. Olá! Queria saber como usar uma fonte diferente apenas no título do número de comentários. Eu gostaria de usar a fonte “a song for jennifer” mas não consigo de jeito nenhum. você poderia me ajudar? Obrigada! Muito fofo seu blog!

  5. Não consigo alterar minha fonte, quando eu faço o passo a passo ela muda, só que fica uma fonte nada a ver com a que eu escolhi e mesmo que eu mude para outra, continua essa nada a ver. :(

  6. Oi, eu venho acompanhando o seu blog já faz um tempo, acho que 1 mês pra ser mais exata. Aprendi como fazer várias modificações no meu blog que partiram daqui, inclusive mudar a fonte do título das minhas postagens com a fonte do Google Fonts, porém eu não consegui (de jeito nenhum) modificar a fonte do conteúdo do post, sabe, o texto da postagem. Não tem como você fazer esse tutorial pra gente não? Tô precisando tanto e não consigo fazer. Eu uso o Blogger (blogspot), por favorzinho.

    Boa noite. ❤

Deixe uma resposta