Como usar fontes diferentes no Blog

quinta-feira, setembro 19, 2013

Olá meninas! O Papo Garota de hoje traz mais um tutorial super útil, a pedido de uma leitora muito querida. Quem já fez o seu pedido pode aguardar que eu vou fazer *_*
Quer usar uma fonte linda no título do post ou na sidebar? 

O primeiro passo é acessar esta página http://www.google.com/fonts/ . Ela foi criada pelo Google especialmente para armazenar fontes variadas que são reconhecidas pela net de uma forma rápida e criativa.
Ao abrir o site você vai encontrar diversas fontes com exemplos escritos para ficar melhor a escolha, então basta escolher a fonte desejada, para ajudar eu deixo alguns exemplos de fontes que eu particulamente acho lindas para usar no menu, post, sidebar etc.

  • Sofia
  • Dancing Script
  • Cookie
  • Sacramento
  • Lobster
  • Lily Script One
  • Bubbler One

Depois de escolher a fonte clique em Quick-use, no mesmo quadrado da fonte que vc escolheu.
Copie o primeiro código que aparece, conforme exemplo:

Feito isso, abra o modelo HTML do seu layout e procure por: <head>
Logo abaixo, cole o código que você copiou.
Agora, coloque uma barra / ao final do endereço, antes de >
Ficará assim: 
Sem a barra:
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
Com a barra:
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>


Obs: Se não fizer isso o código não funciona

Em seguida, volte para a página Google Fonts e copie o segundo código, e então cole ele onde você quer que a fonte esteja.
Exemplos:
Se for no título da postagem, procure por: .post h3 { 
e cole o código abaixo dele.

Para os títulos da sidebar, procure por: .sidebar h2 {
e cole o código abaixo dele

Para o título do Blog, procure por: #header h1 {
e cole o código abaixo dele

Para o texto da postagem, procure por: .post {
e cole o código abaixo dele

Agora é só salvar, e ver o resultado!

Dicas:
Para aumentar ou diminuir o tamanho da fonte mude essa numeração:
font-size:20px;

Para deixar as letras da fonte todas maísculas acrescente este código abaixo do local desejado:
text-transform:uppercase;

Se a fonte estiver com as letras todas maísculas troque "text-transform:uppercase;" por: text-transform:none;

Gostou do tutorial? Curta a fanpage do Blog que vem muito mais por aí!
Qualquer dúvida, me escreva um comentário.
Beijos 

Postagem mais recente Postagem mais antiga

Você também vai gostar

18 comentários

  1. Obrigado Cami por colocar agora tenho certeza que vou conseguir um beijo linda.

    ResponderExcluir
  2. Eu realmente consegui pesquisei em muitos blogs mas só no teu consegui entender

    ResponderExcluir
    Respostas
    1. Que bom que deu certo! Vou preparar outros tutoriais que já foram solicitados.
      Beijo enoorme :)

      Excluir
  3. Oi Camila.
    Passando para conhecer seu blog ^.^
    Sempre uso as fontes do Google no meu blog, tem para todos os gostos ;)
    Beijos!

    ResponderExcluir
    Respostas
    1. é sim, todas lindas *_*
      Obrigada pela visita!

      Excluir
  4. Oi Camila.
    Não estou conseguindo inserir. Faço de acordo como vc explicou. Estou utilizando um modelo de blog disponível no seu, mas não está dando certo =/

    Bjus

    ResponderExcluir
  5. Olá,vim conhecer seu Blog,amei e á estou super curtindo a fanpage,parabéns pelo cantinho.

    Gostaria de te convidar para conhecer meu Blog e se gostar e puder curtir a fanpage ou seguir tambéms,erá muito bem vinda,sinta-se em casa.

    http://emcasademaria.blogspot.com

    ResponderExcluir
  6. Eu coloquei no meu blog e agora os seguidores sumiram!! me ajuda!!

    ResponderExcluir
  7. Olá Camila, então eu gostaria muito de saber como colocar um texto antes do comentario da pastagem, ai eu não sei como esplicar tipo isso~> http://i.imgur.com/SjX5ZFw.png
    Se for fazer o tutorial, muito obrigado ira me ajudar muito... ;)
    Segue por favor? girls-fashion-o-blog.blogspot.com.br

    ResponderExcluir
  8. ai camila muito obrigada ajudou muito mesmo esse e o botazinho do topo sou mega fã do seu blog já estou curtindo.
    Dá uma passadinha lá no meu blog pra ver como ficou pf se gosta segue de volta pf

    http://blogadolescentejgt.blogspot.com.br/

    ResponderExcluir
  9. Tinha conseguido colocar, mas agora sumiu, era o titulo do blog
    http://intheendintheend.blogspot.com.br/

    ResponderExcluir
  10. fiquei imensamente feliz porque deu certo! obrigada.

    ResponderExcluir
  11. Olá, eu já procurei no html :
    .post h3 {
    .sidebar h2 {
    #header h1 {
    .post {

    E nenhum aprece, será que me pode ajudar?

    Por favor responda-me no meu blog.
    http://pipocainspira.blogspot.pt

    Obrigada.

    ResponderExcluir
  12. Olá, eu estou com o mesmo problema que o da Pipoca Inspira, procurei e procurei os html e nada deles aparecerem. Poderia ajudar-me?

    ResponderExcluir

Não deixe de comentar!
Sua opinião é muito importante para mim :D
Beijos...

Rolando no Blog!

Post em destaque ♡

Caixotes de feira na decoração

Se tem uma coisa que adoro fazer, é arte! <3 Me amarro em decoração, principalmente quando se trata de transformar lixo em artigos su...

Mais lidos da Semana