Image Map

25/03/2013

Como usar Font Face

Créditos: 
escrever errado na montagem é comigo, hahaha
 Bom dia minhas lindas! Primeiramente quero pedir milhares de desculpas á todas que tem comentado por esses dias! Tenho estado super sem tempo, cheia de provas, trabalhos e um simulado na terça e não tive tempo pra quase nada! Já estou explorando a Laura (desculpa e obrigada, Laurinha!) pedindo pra que ela responda meus comments.
 Mas enfim, começando a falar do post, hoje é um que com certeza vai ajudar muita gente! Quando vi esse post lá no blog da Camila shorei arco-íris, já que ela foi a primeira que me fez entender o que era font face e como que se instala! Muito obrigada, viu?
 E por isso vim aqui ensinar vocês hoje! Primeiro vamos entender o que é font face: lembram que eu já ensinei aqui, há um bom tempo, como que se instalam fontes diferentes (do google) no blog? Pois então, agora vim ensinar a colocar não só as fontes do google, mas qualquer fonte! Isso mesmo, QUALQUER! Diga-me se não é uma alegria!
 E pra fazer isso é super simples. Primeiro você escolhe a sua fonte (veja se ela aceita letras maiúsculas e minúsculas, acentos, pontuação, acentuação e etc.) e então tem que hospedar ela. Eu hospedo as minhas no File Den, onde é super simples!
 Primeiro você entra lá e faz uma conta, depois vai em "Upload" e clica no seguinte botão:
 E ali escolhe o arquivo da sua fonte (no formato .ttf ou .otf). Depois, vai aparecer algo mais ou menos assim:
 "A Sweet Melody My Lady" é o nome do arquivo da minha fonte, no lugar vai aparecer o da sua. Guarde bem esse nome porque vamos precisar! Depois, clique em Upload Files e espere que abra uma nova aba assim:
 Copie somente o link da sua fonte (como dá pra ver na imagem). Agora abra o seu HTML e procure por:
]]></b:skin>
 Em cima do código encontrado, cole o seguinte código:
@font-face { font-family: NOME DO ARQUIVO DA SUA FONTE; src: url('LINK DA SUA FONTE'); }
 Edite o que pede e depois é só colar o "Nome do arquivo da sua fonte" onde você quiser que ele apareça, do seguinte modo:
font: normal 20px "Nome do arquivo da sua fonte", cursive;
 Alterar e salvar! Você pode colar em:
h3.post-title a {     ------> títulos dos postsh2 {    ------> títulos dos gadgets 
 Enfim, espero que tenham gostado! E caso usem o tutorial, não se esqueçam de creditar, ok? Ah, e me digam quais posts vocês querem por comentário, que estou em dúvida! ;)

44 comentários:

  1. Otimo tutorial , ameei *-*

    www.clarinhapink.com

    ResponderExcluir
  2. Ótimo tutorial, mesmo eu não entendendo dessas coisas ú-u Muita complicação pro meu gosto, UAHSUHSA'

    -Epílogos e Finais.

    ResponderExcluir
    Respostas
    1. Obrigada, bom que gostou! *u* Ok, ahsuahsuahsu ><

      Excluir
  3. Amei o tuto! Não conhecia! Eu nunca tinha ouvido falar em font face rsrs.
    Beijos
    universoteengirl-porlarissa.blogspot.com

    ResponderExcluir
  4. Adorei o tutorial! Acho que vou usar, hihi.
    Beijos,
    www.sonhosde-primavera.com
    pensa-mentosmeus.blogspot.com.br (blog de textos)

    ResponderExcluir
  5. Já conhecia o font-face, ele está em quase todos os meus layouts. As fontes quando não são hospedadas, geralmente não pegam em todos os computadores. bezzo, sarah
    http://svt-pistache.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Infelizmente, né? :/ Seria bem mais fácil! hahaha

      Excluir
  6. Amei o tutorial!
    BEIJOS!

    rarosej.blogspot.com.br

    ResponderExcluir
  7. Ótimo tutorial, adorei.

    http://simples-e-agradavel-bloog.blogspot.com.br/

    ResponderExcluir
  8. Muito legal esse tuto, assim que eu mudar o nome, lay, url do meu blog, vou usar esse tutorial várias vezes. Beijos
    ilovecantores.blogspot.com

    ResponderExcluir
  9. Eu acho esse recurso muito legal, eu não uso ainda o @font-face no meu blog, más eu uso nos layouts que eu faço de vez em quando rsrsrs E acho muito legal.
    the-paradiise.blogspot.com.br/

    ResponderExcluir
  10. Adorei esse tuto ainda não instalei nenhuma fonte no blog, mas quando eu quiser, já sei para onde ir :D
    Beijinhos
    Facebook do blog
    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir
  11. Gostei, já estou seguindo, se gostar do meu, me segue.

    http://vivianapombo.blogspot.pt

    ResponderExcluir
  12. Não instalei nenhuma fonte no meu blog, mas sei lá, tenho preguiça! huhsauhsaush
    Bjo, Sel ;*

    Jovens Gordinhas
    Unicórnio com Bigode
    Nerd Descolada

    ResponderExcluir
  13. Mais uma dica ensinada, mais uma dica aprendida rs :D
    Beijos,

    lolaporlola.blogspot.com

    Instagram: stephanieparizi

    ResponderExcluir
  14. Adorei o tutorial, nunca ia saber por QUALQUER FONTE no blog. morri apenas x.x
    Dicas para post (que eu quero muuuuito saber) :
    Como fazer aquele efeito nos link e nos títulos dos gadgets do blog de encomendas (aquele que pula e deixa um rastro, meio 3D, mais ou menos isso)
    Como fazer esse efeito que desfoca as imagens quando passa o mouse aqui do Piink Cookie (no ''Recomendo'' & no ''Gatinhos'').
    Beijo :3

    http://garotasatrevidas-s2.blogspot.com.br/

    ResponderExcluir
  15. gostei do tutorial
    eu nem conhecia o font face xp

    ResponderExcluir
  16. Eu até que entendo um pouco de códigos, mas achei esse tutorial confuso demais pra minha inteligência, KKKKKK. ♥

    >>Bonequiinha de Luxo<<
    - xoxo –

    ResponderExcluir
  17. Oi, tudo bom? hahaha, Então eu deixei uma aviso lá no blog para todas as blogueiras que acompanham o SDF, se você puder ir lá dá uma olhada vou amar.

    Beijo, @_brearaujo
    http://saladadefrutasbr.blogspot.com.br/

    ResponderExcluir
  18. ja coloquei e retirei, mas amei ver esse tutorial por aqui, sem contar que muuuuita gente procura ne. Mil beijooooos


    annecrisley.blogspot.com

    ResponderExcluir
  19. Ainda não conhecia esse recurso.
    E já que pediu uma sugestão de post, lá vai: Eu gostaria de saber se é possível personalizar a caixinha do arquivo do blog, quando está em menu suspenso. Gostaria de colocar cores ou bordas e aumentar o tamanho. Bjus!

    galerafashion.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada, vou tentar fazer esse post, viu? :D

      Excluir
  20. que legal!!! aadorei! eu gosto muito dos seus tutos P.C.!!
    mas vê se não some do blog hauahauha
    lelusantos.wordpress.com

    ResponderExcluir
    Respostas
    1. Ooown, brigada >< Pode deixar que não vou sumir! hahaha

      Excluir
  21. Eu quero ver a Sweet Melody My Lady u.u lecal ^u^

    ResponderExcluir
  22. Adorei o tutorial,eu nem sabia que tinha como pegar de outros lugares...
    beijos

    ResponderExcluir