Tutorial - Usando fontes diferentes pelo Web fonts


Olá gente!

Bem, ontem eu fiquei a madrugada preparando esse tutorial, porque fui dormir na casa da minha tia, pois ela e minha mãe foram no show da Paula Fernandes que acabou muito tarde, com isso fiquei acordado esperando ela, a madrugada inteira. Tirando isso acho que o meu dia ontem foi normal, além de outras coisas que aconteceram comigo. Ontem teve um encontro de fãs em um shopping perto da minha casa, eu e minha amiga estávamos organizando a dias, e quando chegou a data, minha mãe não deixou eu ir.

Pelo menos eu sobrevivi a isso. Enfim, pediram na ask como usar fontes diferentes no blog. "Como assim fontes diferentes?", assim, o blogger disponibiliza algumas fontes que podem ser usadas e etc, mas para usar fontes diferentes precisa de um pequeno processo, com isso você usa qualquer fonte que quiser. É um tutorial bem útil. A Luly já havia postado a primeira forma de como fazer isso, usando o font-face, para ver o tutorial vá aqui (x), essa é a primeira forma de se usar uma fonte diferente, vou ensinar a outra nesse tutorial.

1. Antes de tudo, você precisa escolher uma fonte no Google Web Fonts.
2. Depois de escolher sua fonte, vá em Quick-use (print).
3. Depois disso você irá para outra página, desça um pouco ela que você achara a seguinte text-área com o código da sua fonte (print). Ps: O seu código será diferente do código do print.
4. Antes de copiar o código, coloque uma "/" antes de ">". Não entendeu? Veja um exemplo:
Seu código estava assim:
<link href='http://fonts.googleapis.com/css?family=Sail' rel='stylesheet' type='text/css'>
Com a barrinha ele ficará assim
<link href='http://fonts.googleapis.com/css?family=Sail' rel='stylesheet' type='text/css'/>
5. Depois de ter feito essa pequena modificação, pegue o seu código com a barrinha que você adicionou e vá no seu html e cole acima de <head>.
6. Desça mais um pouco a página e você vai encontrar o código para usar sua fonte (print). Ps: Isso é só um exemplo, seu código será diferente, de acordo com sua fonte.
7. Pronto, depois disso coloque ele onde quiser, sidebar, blockquote, leia mais e etc.
Então foi isso gente, qualquer dúvida pergunte pelos comentários.

18 comentários:

  1. Adorei o tutorial, é muito útil! Eu não conseguiria viver sem o Google Fonts! :)

    @Catching Stars

    ResponderExcluir
    Respostas
    1. Obrigado! Que bom que tenha gostado, fico feliz! Eu também não. HAUSHAUS'

      Excluir
  2. Esse site é deeeeeeemais, eu adoro, sempre uso ele, HASU' Também, qual outro site iria usar, u_u' ? Adorei o tuto, super útil!

    -4 Seconds.

    ResponderExcluir
    Respostas
    1. AUSHU' Eu também adoro! Uso sempre que preciso <33' Né?! Obrigado, fico feliz que tenha gostado!

      Excluir
  3. É super útil, até par variar um pouco né ^^
    quirky-tree.blogspot.com

    ResponderExcluir
  4. As fontes diferentes deixam o blog mais chique u.u


    Kissu :*

    ResponderExcluir
  5. Adorei o tutorial , já uso fonte diferente, é tão estranho aquelas fontes toda preta o3o'

    - Oh! Let's Fly

    ResponderExcluir
    Respostas
    1. Obrigado, que bom que tenha gostado. >3<

      Excluir
  6. Eu sempre, sempre, sempre que posso uso, pena que é só limitado às fontes do Google, pois se fosse para todas seria um sonho ♥

    Beijos ~
    Garotas Cupcakes | garotas-cupcakes *perfil*
    Star Blends | star-blends *você já conhece heuheuahe*
    Cupcake Icons | cupcake-icons *perfil*

    ResponderExcluir
  7. Respostas
    1. Obrigado! >3< Aposto que nem leu o que eu escrevi /masok

      Excluir
  8. É algo bem simples, moço o3o
    E lamento por tu não ter ido -qq

    #World Of Tutos

    ResponderExcluir

Regras:
• Os comentários são moderados.
• Não xingue nada nem ninguém.
• Comentários como: "Seguindo, segue de volta ?" serão deletados.
• Se for fazer uma crítica faça com educação e bom senso.
• Pedidos feitos por comentário não serão realizados, pedidos só na ask.
• Obrigado por comentar!