segunda-feira, 24 de fevereiro de 2014

Instalando fontes diferentes no blog #2


A página de goodies é a mais visitada do blog, embora eu não à atualize mais, com tanta frequência como antigamente. Isso porque eu já ensinei praticamente TUDO o que eu sei sobre design, html e afins. Sem falar que hoje em dia já tem muuuitos blogs falando sobre isso, né?! Então a tia Jackie resolveu aposentar mais cedo e focar em outros assuntos (: 

Estou falando disso, porque um dos tutoriais mais visitados aqui do blog é o que eu ensino a instalar fontes diferentes no seu layout (www), através do google web fontes, se lembram?
Então risquem esse tutorial da vida de vocês, pq o que eu vou ensinar agora é mil vezes mais fácil, e eu particularmente estou AMANDO! 
Que é através do @font-face.

O legal do @font-face é que você pode usar as fontes do seu PC no blog, ao contrário do google web fontes que você só pode usar as fontes que são disponibilizadas por lá (que chato!). 



Para começar hospede a fonte que você quer usar no blog nesse link www 

Daí vai aparecer algo como:
 
Esse é o link da sua fonte hospedada (deixe aí por enquanto).

Agora cole esse código acima de ]]></b:skin>
@font-face { font-family: "NOME DA FONTE"; src: url(URL DA FONTE); }
Onde esta vermelho coloque o nome que você quiser e onde esta roxo coloque a URL do arquivo que tu hospedou.

Exemplos prontos (podem usar).

@font-face { font-family: "honey"; src: url(http://static.tumblr.com/fmvhucp/r9Cn17b5u/honeyscript-light.ttf); }


@font-face { font-family: "running"; src: url(http://static.tumblr.com/fmvhucp/2RQmy7wug/running_for_a_cause.ttf); }


@font-face { font-family: "amati"; src: url(http://static.tumblr.com/fmvhucp/ILHmy7tju/amaticsc-regular.ttf); }


@font-face { font-family: "are you"; src: url(http://static.tumblr.com/fmvhucp/at7my7ofj/are_you_freakin__serious.ttf); }


@font-face { font-family: "love"; src: url(http://static.tumblr.com/fmvhucp/2Htmyccu5/amandarae.ttf); }

Agora vocês podem personalizar qualquer fonte do seu blog, é só saber onde fica o font-family de cada um e alterar o nome da fonte padrão para o nome da fonte que vocês escolheram.

Veja também: 

Espero ter ajudado! Beijos ^-*

23 comentários :

  1. Adoro os as fotos que vc coloca que n tem nada a ver com o post kkkk >.<
    Mari :*
    http://entaovamosfalar.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk não resisti, esse gatinho é muito fofo *w*

      Excluir
  2. Estava louca por um tutorial bom e que prestasse e finalmente achei! Adoreeei.

    Beijos,
    chuvadeejaneiro.blogspot.com

    ResponderExcluir
  3. Eu já conhecia, eu simplesmente amo esta maneira de colocar fontes, porque até podemos usar algumas criadas por nós! Ê muito útil mesmo este tuto.

    Bia | Bibokices

    ResponderExcluir
  4. Oiii jackiee <3 amo/sou seu blog u-u adorei , mas como faço para colocar em titulo de post?
    Visita amore? http://teenagedreamfc.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. http://isjackiezzdream.blogspot.com.br/2012/08/personalizando-o-titulo-das-postagens.html

      Excluir
  5. Ai bem fácil.. as fontes do blogger n tem muita opção, sempre bom instalar mais. Podia fazer mais um post com algumas fontes para download <3
    fashionemcores.com

    ResponderExcluir
  6. Jackie,mas como vou colocar essa fonte no título do blogue?

    ResponderExcluir
    Respostas
    1. Desculpa, não entendi direito a dúvida.
      Você se refere ao titulo do cabeçalho ou o titulo das postagens????

      Para ambos é só mudar a font-family padrão para a font-family personalizada.

      Por exemplo:

      Olha esse tutorial > http://isjackiezzdream.blogspot.com.br/2012/06/personalizando-o-titulo-dos-gadgets.html

      Ensina como personalizar o titulo dos gadegts.
      Na segunda linha do código vc encontra:

      font-family: 'Sofia', cursive; /*Tipo de fonte*

      Que é aonde vc muda a fonte, só trocando o nome que no caso é 'Sofia', cursive pelo nome da fonte que tu quer.

      --- x---

      Eu realmente não entendi direito tua dúvida, espero não ter te confundido mais :s

      Excluir
    2. O título das postagens, Jackie, foi mal não ter especificado :/

      Excluir
    3. Mas é a mesma coisa, só que com outro tutorial.
      Olha aqui> http://isjackiezzdream.blogspot.com.br/2012/08/personalizando-o-titulo-das-postagens.html

      Esse é o tutorial para personalizar o titulo das postagens.

      Excluir
  7. Pois é esse tuto é melhor do que instalar pelo google , porque tem poucas opções.
    Acho lindo blogs com fontes assim u.u

    Geekegirlie.blogspot.com || 괴짜와 아가씨

    ResponderExcluir
  8. Eu amo usar o font-face, porque tem algumas fontes tão lindas que não tem para web, daí é só fazer isso e ser feliz e deixar seu blog mais bonito *-* kk
    República Crash

    ResponderExcluir
  9. Seus tutoriais já me ajudaram várias vezes, obrigada :)
    Mas eu queria saber como faz para colocar esse menu lá em cima. Já vi em muitos blogs, acho lindo, mas nunca achei nenhum tutorial.

    ResponderExcluir
    Respostas
    1. Pode deixar que em breve eu ensino Cecília (:

      Excluir
  10. Amei o tuto, usei uma dessas ja prontas rsrs, ajudou de mais parabéns.

    ResponderExcluir
  11. Oi Jackie, preciso de sua ajuda! Eu já tentei baixar fontes em vários sites inclusive no dafont que é o mais conhecido, e até consigo mas quando vou usar para alguma coisa aparece um aviso dizendo que a fonte não é válida. Já tentei de tudo e não consigo. Será que poderia me ajudar?
    Desde já obg, beijos.

    Bella Tulee | Fan Page

    ResponderExcluir
    Respostas
    1. pq esta fazendo algo errado, esta com alguma duvida no decorrer do tutorial?

      Excluir
  12. O tutorial é ótimo, só é uma pena que não funciona no html(só no css), só consegui usar no html o primeiro tutorial, que é com o google fonts. ^-^

    lovelydraft.blogspot.com

    ResponderExcluir
  13. Não mudou nada no meu blog. Me ajude, por favor!

    ResponderExcluir
    Respostas
    1. Tenta esse http://isjackiezzdream.blogspot.com.br/2012/04/instalando-fontes-diferentes-no-blog.html

      Excluir
  14. Não estou conseguindo. Eu coloquei esses códigos e fiz tudo como esta pedindo aí mas quando vou tentar colocar as fontes no título dos gadgets não dá certo.

    ResponderExcluir
  15. Muito bom! Funcionou direitinho. Só ao invés de eu armazenar a fonte, busquei de outro site o link de referência. Muito obrigado!

    ResponderExcluir

.