In Tutoriais

Usando Fontes do Computador e do Google no Blog

Olá! Desejo que tudo esteja super bem com vocês!
Algumas pessoas me perguntam como fiz para usar essa fonte de corações nos títulos das postagens e em outros lugares pelo blog. É bem simples ^^
Hoje vou mostrar como usar qualquer fonte do seu computador ou do Google mesmo em seu blog, site ou tumblr. Então já deixe separado uma pastinha com algumas fontes que usa, caso deseje usar uma delas. As fontes se encontram na pasta "Fontes" dentro de "Windows" do seu computador - C:\Windows\Fonts
É só copiar alguma que goste para uma pasta nova no desktop por exemplo, para ficar mais fácil.
Vamos lá!
Existem várias formas para se fazer isso; vou resumir cada uma das que conheço:
1. Usar Fontes do Google
Nesse caso, não será usada nenhuma fonte do PC, mas as várias que o Google Web Fonts disponibiliza; tem muitas opções e é difícil encontrar alguma feia. Funciona assim:
- Ao acessar o site (acima) navegue e escolha uma fonte;


- Clique em "Quick use". Na página que se abre, deslize até encontrar esse código:
- Copie e cole o código no HTML do seu template, acima de </head>, no seu tumblr antes de </style> ou em qualquer CSS que permita edições.
- Para que a fonte apareça em algum lugar é só adicionar font-family:'NOME DA FONTE'; o nome sempre aparece antes de family no código; exemplo:
Se quiser que a fonte do exemplo acima apareça no título dos posts, geralmente representado em HTML por h3, deixe assim:
h3.post-title {
font-family: 'Paprika';
font-size: 28px;
  color: #000;
text-align: center;}
- Visualize e se aparecer o texto com nova fonte, salve.

2. Usar Fontes do Computador
Para isso precisaremos hospedar a fonte na internet ou usar um site que forneça um código para gente. É nesse caso que iremos utilizar uma coisinha chamada @font face, que permite justamente que a fonte que estava no seu computador funcione em todos os navegadores modernos. Você pode usar assim:
2.1 Hospedando a Fonte na Internet
- Hospede a fonte que desejar em algum lugar, como no Tumblr, se tiver conta lá, mandando o arquivo para esse link ou Dropbox (veja como hospedar no dropbox aqui). Em todos os casos, hospede de forma pública para pegar o link depois; eu recomendo mais o Dropbox porque no Tumblr, após hospedado, um arquivo não pode ser removido ou editado e você tem que fazer tudo de novo caso queira alterar algo. Se bem que no caso da fonte não dá trabalho neh.
- Agora cole a URL do arquivo de fonte que hospedou no código abaixo, junto com o nome e formato dela:
@font-face {font-family: “NOME DA FONTE”; src: url(‘URL DO ARQUIVO’); format ('truetype');}
- O código acima deve ser colado no CSS, antes de ]]></b:skin> no Blogger ou </style> no Tumblr. Já vi muitos sites recomendando usar o formato truetype por padrão, mas sinceramente, não sei por quê rsrs...
- Para usar faça o mesmo que que faria no caso do Google, ou seja, é só adicionar font-family:'NOME DA FONTE', assim:
h3.post-title {
font-family: 'NOME DA FONTE';
font-size: 28px;
  color: #000;
text-align: center;}

2.2 Sites que Geram Códigos
Mas para ficar mais fácil ainda, podemos deixar que sites façam todo o trabalho pela gente hehehe...para isso existem o Cufon e o Font Squirrel, ótimos sites para esse fim e que também contam com suas próprias fontes e kits @font face.
Caso queiram usar alguma fonte do seu computador e deixar que esses sites convertam tudo para você, leiam estes tutoriais:
Mas se quiserem usar alguma das fontes dos sites, é só fazer isso:
  • No Font Squirrel, abra esse link e clique em Get Kit na fonte que mais gostar para começar o download do kit com códigos e fontes. O código que vier pode ser colado no CSS.
  • No Cufon, abra esse link e clique no local amarelo abaixo: 
  • Pegue o código no final da página que se abre ou faça download dele e cole antes de </head>
Lembrando sempre de nomear a fonte em font-family daquilo em que deseja usar, seja nos títulos dos posts, menus, blockquotes e por aí vai.
Eu espero ter ajudado de alguma forma :3
Ah sim! A fonte que uso nos títulos das postagens se chama Kinkee e veio nesse pack com 550 fontes do I Love Banner.
Beijinhus...

Related Articles

27 comentários:

  1. O seu blog está sempre me ajudando, obrigada!
    Bjss

    ResponderExcluir
    Respostas
    1. Eu é quem agradeço ^^
      Fico super feliz em pode ajudar :3
      Beijus...

      Excluir
  2. Da pra usar em Blogspot ou sooó em Tumblr ?!

    ResponderExcluir
  3. Nossa eu tava curiosa para saber como se colocava as fontes assim, o bom é que fica lindo e não é nada difícil amei. bjs
    no-planetaroom

    ResponderExcluir
    Respostas
    1. É legal neh ^^
      Tem fontes do nosso computador que a gente sempre gosta; adicioná-las ao blog fica super lindinho!
      Beijus e obrigada :3

      Excluir
  4. oi obrigado para o tutorial uma pergunta que pode usar sua própria fonte ?

    ResponderExcluir
    Respostas
    1. De nada ^^
      Pode usar qualquer fonte que estiver em seu computador, incluindo essa que eu uso, se tiver feito o download dela já.
      Beijus...

      Excluir
  5. legal, eu tenho um monte de fontes legais instaladas mas nao sabia usar :3

    ResponderExcluir
  6. Mega tuto flor!!
    parabéns, eu to a um bom tempo pra ensinar sobre as fontes mas sempre esqueço hahaha

    Só um problema de usar fonte hospedada é que no firefox não funciona (só quando está hospedada no mesmo dominio) por isso eu prefiro as do google ou em base64.

    Bjãooo linda!

    ResponderExcluir
    Respostas
    1. Bia: Fico feliz que tenha gostado :3
      Giza:Valeu a dica Gizaa ^^ Eu prefiro as do Google e base 64 também.
      Muito obrigada e beijus a todas<3

      Excluir
  7. Sempre com muita ajuda, novamente obrigada! Já comentei, mas você merece mais e mais comentários!!!
    Bjss

    ResponderExcluir
    Respostas
    1. E todos os seus comentários me deixam super feliz!!!
      Obrigada mesmo, de coração <3
      Beijus...

      Excluir
  8. Ah !, e eu tive mais um probleminha será que você pode me ajudar ?
    Ae você puder . . .Eu troquei o template do blog mas voltei a usar o do nyanpire. Então uma barrinha que fica nas postagens do outro template continuou lá e as postagens relacionadas sumiram !!. E eu também tentei trocar a fonte do titulo das postagens e não dá certo !, envés disso volta aquela fonte normal e feinha, acho que verdana !
    Ok !, última vez que te atrapalho !!!

    ResponderExcluir
    Respostas
    1. Nessa vou ficar devendo, porque não conheço os códigos do outro template; agora quanto a fonte, tente usar as do Google ou Font Squirrel ou do Cufon. São as formas que dão mais certo.

      Excluir
  9. eu acho melhor vc colocar a sua caixa de pesquisas la em cima, pra ficar mais facil todos procurarem....

    ResponderExcluir
  10. Muito legal o tuto ♥ Vou começar a usar algumas fontes que eu tenho no meu note.

    ResponderExcluir
  11. Gostei mas não entendo de Html enfica super difícil colocar as fontes onde quero H3 é o do titulo dos posts? Neh? Mas e os outro, poderia me ajudar? Big beijo.

    ResponderExcluir
    Respostas
    1. Oi Tainá :) É o H3 é dos posts. Para adicionar em qualquer lugar basta adicionar o font-family no css, como mostrei no post. Por exemplo, se for nos títulos da sidebar, seria dentro de .sidebar h2{...} Ou em um menu, seria algo tipo .nomedomenu{...}
      Em que local desejaria adicionar? Para te ajudar de um jeito mais específico :3

      Excluir
  12. Eu usei o codigo do @font face, mas nao entendi por que a maioria das fontes nao funciona. Soh a primeira que eu tentei funcionou.

    ResponderExcluir
    Respostas
    1. Use o gerador de @font-face do site Font Squirrel. Ele dá certinho! Só enviar a fonte e o site gera os arquivos para hospedar e usar; se você clicar na opção Expert, vai poder configurar, e é legal deixar marcado umas das opções que diz base code 64; depois que baixar, abra o documento css, copie e cole antes de /b:skin; aí depois é só usar o nome da fonte onde quiser, tipo nos títulos...Depois farei um post explicando melhor ok?

      Excluir
  13. Oi Roberta!
    Caí no seu blog à procura de um tutorial que desse certo e nem acredito, finalmente deu super certo! Muitooooo obrigada!
    Beijos

    ResponderExcluir
    Respostas
    1. Que bom ^^ Fico feliz por vc e muito obrigada também <3

      Excluir
  14. O dropbox, para ter a opção lá de public e tal tem que ser conta premium? porque o meu não tem nem mesmo uma pasta publica nada, não acho nada para deixar de forma publica e agora?

    ResponderExcluir
    Respostas
    1. Quando criei uma conta gratuita lá há algum tempo, já tinha uma pasta pública... Estava lendo este link e este aqui do site que talvez possam ajudar :)

      Excluir
  15. De toda forma não deu certo, quando tento por o codigo no tema fica tudo zoado rsss

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart