22 junho 2016

Colocando Fontes do "Google Fonts" no Blogger


Ois! Quem não gosta da fonte disponibilizada pelo blogger?EU!
Por isso hoje estou trazendo este tutorial. Vou ensinar a vocês como colocar fontes do "Google Fonts" no blogger. Claro, não tem todas as fontes que desejamos, mas as que tem são lindas e, com certeza, você vai encontrar a fonte perfeita para blog.
Lembrando meu povo, sempre faça um BACKUP do seu design antes de fazer qualquer tutorial. Isso é para evitar dores de cabeça. Caso não saiba como fazer backup, eu ensino neste TUTORIAL.
Pronto, já fez o backup? Vamos ao tutorial!

Primeiro vamos acessar o site do GOOGLE FONTS. Clique em POSTER para visualizar melhor o estilo de fonte que deseja.
Vai abri uma nova pagina, onde terá os estilos de fonte. Agora você escolhe a fonte. Eu, por exemplo, escolhi a font COOKIE. Ao deixar o mouse em cima, destaca como uma caixa e no botão azul, onde vai estar escrito ADD COLLECTION, você vai clicar.
Quando clica no botão azul, logo abaixo uma nova caixa aparece, destacando o que você pode fazer. Agora, nesta nova caixa, vamos clicar em USE.
Vai Abrir uma nova pagina, igual a imagem logo abaixo.
1º) Primeiro vamos fazer o nosso blogger aceitar a fonte que escolhemos. Então selecionamos o primeiro codigo que se destaca, como está na imagem abaixo onde coloquei 1º. Selecionou? Bom, agora vamos colocar este código no seu HTML.
PS: Não fecha o site do google fonts, você vai voltar para copiar o segundo código.

Acesse o painel do seu blog.
1º) Agora vá no menu, que fica no lado direito, e clique em MODELO.
2º) Na janela, que vai abrir no lado direito, clique no botão EDITAR HTML.
Vai abrir uma nova pagina, onde estará o HTML do seu blog. Note, logo no inicio vamos ver a Tag <head>. Acima desta tag que iremos colar o 1º código que copiamos no site do GOOGLE FONTS.
Mas para este código funcionar sem erro devemos acrescentar antes da chave > o travessão /
Exemplo:
O código que copiamos é igual a este
<link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>

Colocando o travessão no final ficará assim
<link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'/>

Observe como vai ficar o código na imagem abaixo. Pronto, adicionou o código, vamos SALVAR O MODELO.


Agora vamos adicionar a fonte. Estou usando como exemplo o TITULO DA POSTAGEM.
Você vai voltar no GOOGLE FONTS e copiar o 2º Código.
Vai voltar no seu HTML, e como vamos mudar a fonte do titulo das postagens vamos pesquisar e achar o seguinte:
h3.post-title {

Abaixo vamos colar o 2º código que copiamos do GOOGLE FONTS.
font-family: 'Cookie', cursive;

Vai ficar mais ou menos assim:
h3.post-title {
  font-family: 'Cookie', cursive;
font-size:35px;
  margin: 0;
}


Pronto, sua fonte foi adicionada e está funcionando. Legal, não é.


É isso aí, terminamos por hoje. Por favor não esqueça de fazer o BACKUP do seu design, ou então, faça em um blog de teste antes de fazer o seu blog, beleza!
Quer algum tutorial? Pode deixar nos comentários ou através do email contato@meuinfinito.com.br
Deseja ter um design maravilhoso? Contrate meus serviços. Peça orçamento através do email anazuky@hotmail.com ou pela FanPage.

2 comentários:

  1. Gostei, Ana! Mudei as do meu blog, achei que seria mais difícil, sinceramente, rs.

    Beijos!

    ResponderExcluir
  2. Olá, Ana!
    Estava com problemas com o Google Fonts no blog que comecei recentemente, então resolvi refazer com o seu tutorial e deu super certo. Muito obrigada!
    Abraço,
    Anna

    EscrevendoAsas.com

    ResponderExcluir