Mudar a fonte no blog - Estilizando fontes com css

7 comentários
Alterar fontes no blog

Saiba como alterar a fonte de seu blog

Muitas vezes, você deve ter se deparado com templates, temas, textos com fontes que não agradam ou não condizem com o nicho ou o conteúdo inserido. Muitas vezes, essas alterações são feitas no css do código fonte com fontes padronizadas na web, e é aí que está o problema.

Se o webmaster quiser mudar para uma fonte estilosa, como uma assinatura ou algo mais animado ou diferenciado, tem que partir para fontes personalizadas e criar um estilo com css puxando arquivos externos, o que é complicado para quem não tem conhecimento em programação.

O Google disponibiliza uma série de fontes personalizadas que não são padrões na web e podem ser aplicadas em qualquer blog de maneira bem simples, e é isso que vamos tratar aqui.

Para começarmos, acesse o Google web fonts.

Com o site de fontes do Google aberto, vamos começar nosso tutorial:

Como mencionamos acima, trabalhar com @font-face na css do código fonte chamando um arquivo externo é complicado para quem não tem conhecimento em programação, principalmente em css.

Apesar de existirem várias fontes diferentes gratuitas na web, achar a ideal para mudar é difícil, então, vamos apresentar o Google web fonts, um sistema do Google de fontes personalizadas e simples de se aplicar. Você poderá aplicar nos títulos, em todo o conteúdo do seu blog, postagens, páginas estáticas ou em textos específicos.

Estilos de fontes para textos e títulos

Ao acessar o site, você irá se deparar com uma lista de inúmeras fontes diferentes. Faça uma procura detalhada da fonte que deseja, pois são muitas e, à medida que você vai descendo a barra de rolagem, mais fontes aparecem, pois são inseridas com frequência.

Ao escolher sua fonte, você deve clicar em Quick-use, a segunda caixinha de seleção referente à fonte que você escolheu:

Estilos de fonte

Ao clicar em Quick-use, abrirá uma tela com as opções da fonte que você irá incorporar em seu blog:

escolhendo e selecionando a fonte do google

Os passos seguintes devem ser feitos como descrito abaixo:

Inserindo o script da fonte

A primeira etapa é inserir o script na opção standard (primeira opção). Você deve copiar o código e inserir acima da tag </head>

Inserindo a css da fonte

A próxima etapa é puxar a fonte do link acima nas áreas que pretende alterar no blog. Ainda nesta tela do site de fontes do Google, você notará que existe uma opção mais abaixo, como esta:

4. Integrate the fonts into your CSS:

E dentro desta área, o nome da fonte semelhante a este:

font-family: 'Roboto', sans-serif;

Este é o nome da fonte referente ao link inserido antes da tag </head>
Para cada fonte selecionada o nome irá variar.

Finalizando

Após ter inserido o script acima da tag </head> e ter selecionado o nome da fonte, você irá mudar todo local que possui font-family: pelo nome da fonte selecionada no site do Google Fonts, como explicado acima.

Este recurso funciona para qualquer área do blog, em textos específicos e, até mesmo, em postagens e páginas.

Um recurso gratuito e muito útil para estilizar seu blog!

Este artigo está disponível para publicação em outros blogs ou sites desde que seja seguida a Política do BG

7 comentários :

  1. ESSE E O BG SEMPRE ME AJUDANDO COM MEU BLOG

    ResponderExcluir
    Respostas
    1. Olá marcos agradecemos a visita e ficamos felizes em saber que o artigo foi útil para você volte sempre amigo. Abraços Fernanda Maria do BG.

      Excluir
  2. Entendi só a primeira parte de colar o codigo em baixo do < /h e a d> mas depois não entendi

    ResponderExcluir
  3. Boa tarde estou precisando muito da ajuda de vocês, mudei o tempalte e como não entendo muito de html estou querendo aumentar o espaço entre o final da postagem e o inicio de "postado por", para o linkwith funcionar (como o espaço é pequeno o linkwith não aparece)... Você sabe me falar onde fica essa tag no html, para que eu possa mudar os valores?

    Cacei na net ( Outer-Wrapper) achei sobre como mudar a largura width, ate consegui mais não encontrei o height, não sei se deu para entender o que e para mudar, resumindo queria aumentar o espaço onde o linwith aparece no blog.

    Agradeço demais sua ajuda e paciência... http://rosase-book.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ola Bia, é possível sim a largura e altura (dimensões) ficam dentro do css do seu blog. Para fazer isto é necessário que eu avalie seu blog em particular pois o código fonte do template varia de modelo para modelo e é dificil lhe dizer qual a localização exata do código.

      Entre em contato comigo através do formulário de contato no menu do blog para que eu possa estar lhe dando um maior suporte.

      Excluir
  4. Passei e encontrei o seu blog, estive a ver e ler algumas coisas, não li muito, porque espero voltar mais algumas vezes, mas deu para ver a sua dedicação e sempre a prendemos ao ler blogs como o seu.
    Se me der a honra de visitar e ler algumas coisas no Peregrino e servo ficarei radiante,e se desejar fazer parte de meus amigos virtuais, esteja à vontade, irei retribuir.
    Mas por favor não se sinta coagido, siga apenas se desejar. deixo a benção de Deus.
    António.
    http://peregrinoeservoantoniobatalha.blogspot.pt/

    ResponderExcluir
  5. Olaa! Recomendei seu blog no "Liebster", Espero que não fique bravo haha!.... Só entrar no meu blog e ver o que terá que fazer e etc... ( http://menteaberttatextos.blogspot.com.br/ )

    ResponderExcluir

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.