Usar outros Tipos de Fontes (letras) no Blog

Você pode usar outros tipos de fontes (formato de letras) nos textos ou em qualquer parte do seu blog, isso é possível utilizando o site Google Font Directory, ele é um site que hospeda diversos tipos de fontes que podemos usar em nossos blogs para poder variar um pouco e fugir dos modelos de fontes mais comuns como, por exemplo: Arial, Verdana, Times Roman. E poder dar uma nova aparência ao blog com novos tipos de letras.

Para usar essas fontes no seu blog entre no site Google Font Directory e escolha uma fonte, clique sobre o tipo de letra que gostar.

tipo de fonte no blogspot

Depois em Get the Code e verá uma explicação sobre como colocar essa fonte no seu blog.
codigo da fonte do blogger

Copie o código que está na primeira caixa “Embed the font into your page”, entre na pagina do blogger e procure por <head> e cole o código, mas coloque uma barra no final do código e retire o trecho &subset=latin senão o blogger não aceitará na hora de salvar, ou seja, o código ficará mais ou menos assim:

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'/>

Ficará deste jeito na sua pagina editar html:

fonte no blogger

Depois disso é só aplicar a fonte a qualquer parte do texto no seu blog, como é mostrado no site com o exemplo do estilo h1 que é o titulo do blog, claro isso também na pagina editar html

h1 { font-family: 'Reenie Beanie', arial, serif; }

Veja aqui Como Formatar o Texto do Blog assim usando esse modelo acima poderá usar essa e qualquer outra fonte em qualquer parte do seu blog como, por exemplo, nas postagens ou menu.

Você pode utilizar mais de um tipo de fonte seguindo esse procedimento, mas não exagere senão seu blog pode ficar muito demorado na hora de carregar, teste aqui a velocidade do seu blog.

45 comentários:

  1. parece um pouco complicado, mas vou tentar, mais tarde eu volto pra dizer o resultado rsrs

    ResponderExcluir
  2. oie Boa tarde. bom tenho uma duvida e gostaia de saber se pode me responder, não é relaçionando a este post, mas vou perguntar por aqui mesmpo será que tem alguma coisa??

    Bom é em relaçãoa blogs.

    Bom eu gostaria de saber de vc, se é possivel trocar o email de acesso ao blog, subsituir o existente entende??. pq eu tenho blog, mas gostaria de trocar apenas o e-mail em vez de criar outro isso é possivel ??? desde ja eu agradeço. Anne

    ResponderExcluir
  3. o email que usa para acessar o blog só você precisa saber, pode usar qualquer outro para contato, notificações dos comentários ou qualquer outra coisa.

    mas se quiser trocar o email veja no painel do blogger no topo da pagina tem "minha conta", acho que é possivel adicionar outro email, mas não tenho certeza se dá pra trocar.

    ResponderExcluir
  4. Obrigada Fabiano
    Há muito estava querendo descobrir porque sempre dava erro e agora eu sei que que era por causa do "&subset=latin".
    Eu esperava que alguém ensinasse o macete.
    Antes eu havia conseguido alterar a fonte, mas, depois não estavam aceitando mais e dava erro.
    Que ótimo.
    Desejo uma ótima e proveitosa semana para você.
    Bjoo

    ResponderExcluir
  5. Parece ser uma boa dica, vou tentar depois.

    ResponderExcluir
  6. Olá Fabiano.
    Queria saber sobre uma coisa. Sobre este post,eu queria saber se a Google Font Directory tem mais fontes, pois as fontes que eu estava observando não gostei.
    Espero anteciosamente a sua resposta.

    ResponderExcluir
  7. Olá, na verdade não é sobre fontes que gostaria de falar, gostaria de saber se vc pode me ajudar, porque toda vez que salvo um rascunho no blog quando volto para terminar ele está todo "retorcido" e dá maior trabalho para reorganizar e muitas vezes não salva as minhas alterações. O que devo fazer.
    Muito obrigada desde já!

    ResponderExcluir
  8. Isaura Mirela
    raramente salvo rascunho, então nunca tive esse problema, mas você escreve diretamente na pagina do blog ou copia e cola do word?

    já tive problemas para passar textos do word para o blogger, se for o seu caso sugiro colar no bloco de notas e depois passar para o blogger.

    ResponderExcluir
  9. olá fabiano bom dia. venho ate vc para te pedir um favor seu, pois sei que aqui é o unico lugar aonde posso tirar essa dúvida, fiz um layout para meu blog no photoshop cs5, tipo com menus,baner e tals
    ai fatiei ele e salvei como html, agora gostaria de saber como colocar no blog???
    Desde ja ficarei muito agradecido pela sua resposta ok!!!

    ResponderExcluir
  10. precisa hospedar as imagens e mexer no html do seu blog, alterando as imagens de fundo, use nossa pesquisa no topo da pagina para achar tutoriais sobre imagem de fundo e CSS

    ResponderExcluir
  11. Não rolou ... O Blooger diz: "Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The element type "link" must be terminated by the matching end-tag".

    ResponderExcluir
  12. veja se na hora de colocar o código não apagou alguma letra por engano

    ResponderExcluir
  13. Não deu!
    Ta toda hora aparecendo invalido

    ResponderExcluir
  14. você está retirando o trecho &subset=latin isso gera um erro

    ResponderExcluir
  15. nao consigo fazer se for possivel pegue o codigo pronto pra mim da fonte ' Crafty Girls ' e da 'Fontdiner Swanky'

    ResponderExcluir
  16. só precisa achar a fonte e apagar o trecho que mostramos

    ResponderExcluir
  17. o trecho &subset=latin ?
    ele aparece no codigo da fonte.

    ResponderExcluir
  18. Carla Herculana
    sim, esse trecho aparece no código que pega no site, mas na hora de colocar no blogger as vezes dá erro então pode apagar esse trecho

    ResponderExcluir
  19. Esse último código é para colocar onde?
    "h1 { font-family: 'Reenie Beanie', arial, serif; }"

    ResponderExcluir
  20. você encontrar outros trechos parecidos com esse no html do seu blog, por exemplo h2{...} ou h3{...} então pode colocar junto

    Onde colocar os códigos no blog

    ResponderExcluir
  21. Boas desde já muito bom aqui o vosso site 5*****
    Podiam ajudar-me ffv eu queria meter no meu Blog de capas o Alfabeto e cada capa no se nome
    (Ex.Christine - O Carro Assassino - Christine_1983_PT)(Letra C) como faço isso.
    Qual quer coisa mande MSN para:
    capasalexandre@hotmail.com

    ResponderExcluir
  22. acho que não tem como usar ordem alfabetica no blogger

    ResponderExcluir
  23. O trecho que tem que apagar está no código da fonte ou no código do blogger?Porque se for no da fonte eu não achei,juro que não está lá!

    ResponderExcluir
  24. Ola Fabiano coloquei o codigo
    mas não achei o que tinha que apagar ai ela fica dando o erro.
    Nao FOI Possível analisar o Modelo SEU, SUA POIs formatação e inadequada. Certifique-se de Todos os Elementos Que estao XML adequadamente fechados.
    Mensagem de Erro in XML: O elemento do tipo "Link" devem ser seguidas por qualquer especificações de atributo, ">" ou "/>".

    ResponderExcluir
  25. CJ Video Locadora
    esse erro é bem chato mesmo... certamente é algum detalhe (letra ou sinal) que apagou por engano ou deixou a mais no código

    ResponderExcluir
  26. Eu adorei o post, mas no lugar de alterar a fonte dá para colocar uma imagem no lugar do título do Gadget?

    ResponderExcluir
  27. Laura
    veja aqui: Imagem no título da postagem

    o link fala em titulo da postagem, mas para fazer nos gadgets é só achar o estilo certo, deve ser h2, não tenho como dizer exatamente porque isso varia conforme o template

    ResponderExcluir
  28. Achei 35 H2, qual eu uso?

    ResponderExcluir
  29. tem um h2 que é h2{....} e tem uns códigos de formatação de texto dentro dele, mas assim poderá achar mais de um e varia entre os modelos de template o código exato.. então terá que fazer testes em alguns até achar o certo

    ResponderExcluir
  30. Ae Fabiano... uma vez pedi pra você me tirar essa mesma duvida xD!! so que eu esqueci já =x!!! ajuda pf '-'!!

    vé so..

    como faço pra encontrar no "HTML" do template para mudar a cor da letra do gadget "Seguidores"? sabendo que não tem como eu mudar pelo "desing do modelo" pq o meu template n tem essa opção.

    aqui ta uma imagem pra vc ter uma idéia do q estou falando.

    Vlws ae cara :)!!!


    Ai ta a imagem: http://i56.tinypic.com/2s9qbzb.jpg


    Vlws dnv ^^!

    ResponderExcluir
  31. normalmente esses erros são momentaneos e quando você tenta mais tarde ou em outro dia não aparece mais o erro...

    ResponderExcluir
  32. fabiano axo que n é erro n ( caso tu tenha visto o azul na imagem e pensasse que era erro, o azul fui eu que botei pra mostra oq eu tava falando ^^ ) é que a cor está na mesma cor do fundo do blogger.

    o problema que eu n sei como axo o codigo onde eu possa mudar a cor do gadget seguidores no HTML.

    ajuda pf '-'!! vlws ae

    ResponderExcluir
  33. Fabiano me diz uma coisa pf, como faço pra determinar um tamanho em um codigo de gadget?
    pq o gadget que encontrei, quando coloco no blogger ( ou seja no gadget ) ele fica feioso pq o tamanho certo dele e pra uma largura menor, e meu gadget tem uma largura maior.

    Vlws ae cara, saiba que seu blog e nota 10!!

    Flws.

    ResponderExcluir
  34. os gadgets acompanham a largura da coluna... mas se quiser pode alterar algum deles (para deixar menor) Personalizar gadgets do Blog

    ResponderExcluir
  35. OI. Eu sei que isso não é muito relacionado a blog, mas se vc souber por favor me responda:
    Eu queria saber como fazer aquelas letras que parecem estar riscadas de lápis, como nesse blog: http://disneyprogramacao.blogspot.com/
    Lá do lado. Se vc souber me responde por favor! Tchau!

    ResponderExcluir
  36. Naty Seddie

    o código é text-decoration: line-through;

    veja aqui como usar: Efeitos em links (sublinhado, sobrelinha, tachado)

    ResponderExcluir
  37. não funcionou! ja tentei de tudo mas não consegui! vc pode me ajudar novamente com outras dicas Fabiano?

    ResponderExcluir
  38. é bom saber que funcionou direito...

    se não achar o que estiver procurando pode deixar a pergunta em um comentario e vamos ajudar

    ResponderExcluir
  39. O primeiro site onde eu deveria pegar as fontes não está funcionando.

    ResponderExcluir
  40. vou pesquisar por algum outro site com fontes disponiveis, mas caso você encontre o código é o mesmo que mostramos só precisa trocar o endereço da font

    ResponderExcluir
  41. Fabiano,

    Sabe dizer se essas fontes do Google Fonts carregam ligeiramente na versão mobile? Pois quando vou ver meu blog na versão pra celular, logo abaixo dos resultados aparece o seguinte título "Carregamento lento", o que me deixa estressado, pois faço de tudo para que ele continue rápido na questão do carregamento.

    ResponderExcluir
    Respostas
    1. não sei dizer sobre a velocidade de carregamento das fontes...mas sem duvida o blog carrega mais rápido sem fontes externas.

      use o https://developers.google.com/speed/pagespeed/insights/

      para ver quais os problemas na velocidade do seu blog e tente corrigir aqueles que puder.

      Excluir