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!

About Author

Designer na Inlove Design e artesã na Contém Fofura. Geek, metida a artista e ama coisas fofas.

41 Comments

  • Cássia Vicentin
    31 março 2013 at 15:25

    Vou testar agorinha! Eu conhecia o Cufon, porém ele funciona quando quer x_x

    Reply
    • Karoline
      2 abril 2013 at 20:20

      O Google Web Fonts é a forma mais fácil e menos problemática de usar fontes personalizadas no blogger, funciona bem e em todos os navegadores. :)

      Reply
  • Ainá Paiva
    3 abril 2013 at 16:14

    Agora me responda, o que seria de nossas vidas sem o Google? NADA! Suuuuper adorei a dica! Post de utilidade pública, esse utilitário do Google eu não conhecia!

    Beijinhos flor! ❤
    http://www.certascoisas.com/
    https://www.facebook.com/certascoisasblog

    Reply
    • Karoline
      3 abril 2013 at 20:21

      Concordo totalmente. :D Obrigada pelo comentário! <3

      Reply
  • Renata Carvalho
    1 setembro 2013 at 19:04

    Já baixei tantas fontes lindas pelo Google que até já perdi a conta, são muito lindas.
    Tão lindas que eu acho que elas já deviam vir automaticamente no Word.

    Beijos,
    Resenhando Books

    Reply
  • Camila Campos
    1 setembro 2013 at 21:38

    Eu vou testar!amo as fontes do google uma mais linda que a outra!
    beijos!

    Reply
  • Micaely Rodrigues
    3 setembro 2013 at 15:53

    Adorei as DIcas ! Obrigada flor pela dica!
    :D

    http://omelhordemimpormicaely.blogspot.com.br/

    Reply
  • ♪ Dαyαnє ♪
    10 setembro 2013 at 15:26

    Não tinha ouvido falar não, pra ser sincera. Mas, acho que testarei ^^

    Reply
  • Karla Gisella
    12 outubro 2013 at 1:20

    eu coloquei no meu blog, haah >< beijos,
    http://www.karlagisella.com.br

    Reply
  • Tamires Pereira
    16 outubro 2013 at 3:25

    Essas fontes fazem uma diferença enorme no layout.

    Reply
    • Tamires Pereira
      22 outubro 2013 at 12:38

      * Eu consegui usar elas, graças a esse tutorial ><

      Reply
  • Gabriela Amorim
    18 outubro 2013 at 21:40

    O blog fica todo diferente com as fontes!
    Acho que vou fazer isso >< Beijos
    gabriela-amorim.blogspot.com

    Reply
  • Suzane Frontinelly
    3 novembro 2013 at 12:05

    aah, que útil *-*
    eu realmente estava atrás desse tutorial! amei seu blog.

    Reply
  • Sarah
    4 março 2014 at 11:39

    Hey, amei o tutorial! Mas queria saber como uso fontes diferentes no titulo e no post? Muito obrigado, lindo o seu blog :)

    Reply
    • Karoline
      6 março 2014 at 17:05

      Oi Sarah, para modificar a fonte do título dos posts siga o passo 6 desse tutorial.

      Bjs!

      Reply
  • Carolina Souza
    14 julho 2014 at 23:10

    Não consegui alterar nada e fiz exatamente o que ensinou e fiz em um Template seu HAUHAUHA , ajuda ?

    Reply
  • Rodrigo Fernan
    19 agosto 2014 at 20:27

    Adorei me ajudou muito Bjus…

    Reply
  • Faby
    17 setembro 2014 at 19:16

    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?

    Reply
    • Karoline
      17 setembro 2014 at 21:10

      Faby, o procedimento é o mesmo do tutorial, você adiciona o nome da fonte no “post h3” como ensino no passo 6. :)

      Reply
  • Kaorii-Chan
    21 setembro 2014 at 15:19

    Não funcionou, quando pesquiso h3 h2 ou h4 aparece 0 de 0 encontrados. Me ajude estou desesperada! :C

    Reply
  • Natália Marques
    24 novembro 2014 at 7:35

    Karoline,

    Você teria algum passo a passo para fazer isso no WordPress? Ou esse do post também funciona?

    Obrigada!

    Reply
    • Karoline
      24 novembro 2014 at 12:25

      Oi Natália, esse tutorial também funciona com WordPress, é só adicionar o script na header ^_^
      Bjs

      Reply
  • Ana Carolina
    15 janeiro 2015 at 2:16

    ME AJUDO MUITO!! VALEU…

    Reply
  • Gabriela Barros
    17 fevereiro 2015 at 23:58

    AMO seus tutoriais! Simplesmente incriveis! Vão me ajudar muito no meu blog!

    Reply
  • Karen Lopes
    22 fevereiro 2015 at 23:53

    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

    Reply
  • Rhayane
    5 março 2015 at 20:53

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

    Reply
    • Karoline
      7 março 2015 at 17:04

      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?

      Reply
  • Vanessa Diniz
    13 abril 2015 at 2:32

    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!

    Reply
  • Maria Eduarda
    28 abril 2015 at 19:28

    Adorei o tutotial,mas como coloco no texto do post,a fonte da postagem?

    Reply
  • Gabi Ribeiro
    21 julho 2015 at 13:09

    Tenho adorado as suas dicas, Karoline!! Estão me ajudando demais a melhorar o meu blog (:

    Reply
  • Lívia Machado
    27 outubro 2015 at 23:35

    Ka, Eu procuro no html o trecho que vc manda e não acho, tem alguma opção de barra de pesquisa ?

    Reply
  • Fernanda
    20 maio 2016 at 13:56

    Seus posts são maravilhosos e tem me ajudado muito!

    Reply
  • INGRIDY
    15 junho 2016 at 0:04

    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. :(

    Reply
  • Sara Souza
    20 dezembro 2016 at 3:30

    Quando abro o site que informou, ele abre diferente do seu… Não tem nenhuma das opções que falou ;–;

    Reply
    • Karoline
      27 dezembro 2016 at 21:46

      Oi Sara, como o post foi publicado há algum tempo muita coisa mudou..

      Reply
  • Brookies
    6 fevereiro 2017 at 0:39

    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. ❤

    Reply
  • Raylane
    22 setembro 2017 at 21:39

    Tô tentando, mas tá dando erro. Amei o post mesmo assim.

    Reply
  • renata
    31 maio 2018 at 21:03

    Muito interessante esse site. Parabéns pelo trabalho

    Reply
  • Jheniffer Miranda
    22 outubro 2018 at 21:52

    E como faço para definir a fonte da postagem?

    Reply

Deixe uma resposta para Brookies Cancel Reply

asya-bahis.net -
vdcasino
-

gizabet giriş

- megapari giriş -

maltbahis giriş

-
kolaybet giriş linki
-

redwin1.club

-
süperbetin yeni adres
-
casinomavi.net
-

Sağlık Sen

- eskişehir eskort - eskort eskişehir - eskort - escort - bursa eskort