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: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á!
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:
- 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:
- 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:
- do Cherry Bomb: http://cherry-liah.blogspot.com.br/2012/06/como-usar-o-cufon.html
- do I Love Themes: http://ilovethemes.tumblr.com/post/14869152501/tutorial-usando-fontes-diferentes-cufon
- do Candylland: http://www.candylland.net/2012/02/usando-fonte-face-com-codigo-base64.html
- 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...
O seu blog está sempre me ajudando, obrigada!
ResponderExcluirBjss
Eu é quem agradeço ^^
ExcluirFico super feliz em pode ajudar :3
Beijus...
Da pra usar em Blogspot ou sooó em Tumblr ?!
ResponderExcluirNos dois ^^
ExcluirNossa eu tava curiosa para saber como se colocava as fontes assim, o bom é que fica lindo e não é nada difícil amei. bjs
ResponderExcluirno-planetaroom
É legal neh ^^
ExcluirTem fontes do nosso computador que a gente sempre gosta; adicioná-las ao blog fica super lindinho!
Beijus e obrigada :3
oi obrigado para o tutorial uma pergunta que pode usar sua própria fonte ?
ResponderExcluirDe nada ^^
ExcluirPode usar qualquer fonte que estiver em seu computador, incluindo essa que eu uso, se tiver feito o download dela já.
Beijus...
legal, eu tenho um monte de fontes legais instaladas mas nao sabia usar :3
ResponderExcluirMega tuto flor!!
ResponderExcluirparabé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!
Bia: Fico feliz que tenha gostado :3
ExcluirGiza:Valeu a dica Gizaa ^^ Eu prefiro as do Google e base 64 também.
Muito obrigada e beijus a todas<3
Sempre com muita ajuda, novamente obrigada! Já comentei, mas você merece mais e mais comentários!!!
ResponderExcluirBjss
E todos os seus comentários me deixam super feliz!!!
ExcluirObrigada mesmo, de coração <3
Beijus...
Ah !, e eu tive mais um probleminha será que você pode me ajudar ?
ResponderExcluirAe 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 !!!
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.
Excluireu acho melhor vc colocar a sua caixa de pesquisas la em cima, pra ficar mais facil todos procurarem....
ResponderExcluirValeu a dica :)
ExcluirMuito legal o tuto ♥ Vou começar a usar algumas fontes que eu tenho no meu note.
ResponderExcluirGostei 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.
ResponderExcluirOi 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{...}
ExcluirEm que local desejaria adicionar? Para te ajudar de um jeito mais específico :3
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.
ResponderExcluirUse 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?
ExcluirOi Roberta!
ResponderExcluirCaí no seu blog à procura de um tutorial que desse certo e nem acredito, finalmente deu super certo! Muitooooo obrigada!
Beijos
Que bom ^^ Fico feliz por vc e muito obrigada também <3
ExcluirO 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?
ResponderExcluirQuando 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 :)
ExcluirDe toda forma não deu certo, quando tento por o codigo no tema fica tudo zoado rsss
ResponderExcluir