Como estilizar a fonte do seu site usando o Google Web Fonts

Utilizar fontes estilizadas é uma ótima alternativa para dar um toque de personalidade do seu site. Além disso, utilizar a fonte certa, pode melhorar muito o design do site.

Houve um tempo que trocar a fonte do site era extramamente trabalhoso. Você precisava criar um arquivo da fonte, a partir do formato .eot e ainda estilizar a parte do CSS.
Basicamente, precisava carregar fonte externa para usuários que não tinha a fonte em seu computador.

Tempos passados!

Hoje venho compartilhar uma solução grátis que veio do Google.

Pra quem não sabe, o Google oferece uma ferramenta chamada Google Web Fonts.

Contém uma coleção das mais variadas fontes para web, onde basta copiar o código da fonte e aplicar no seu site.

Como usar o Google Web Fonts

Acesse o site do Google Web Fonts e escolha uma fonte que deseja utilizar. (No caso abaixo, selecionaremos a fonte Lato.)
Ao clicar em Pop out, irá abrir uma nova janela com todos os caracteres disponíveis da fonte. Verifique se a fonte escolhida tenha acentos e cedilha, para que não apresente nenhum erro quando for escrever em português.

Terminou de verificar a fonte? Não apresentou problemas? Então, basta voltar para a lista onde aparece a fonte e clicar no botão do meio, o Quick-use.

Assim como mostra a imagem abaixo.

Ao clicar em Quick-use, imediatamente irá aparecer a seguinte tela:

Repare que a tela do Quick-use é dividida em 4 categorias:

Escolha de estilos. Algumas fontes terão vários estilos próprios, como versões em itálico, negrito, leve… se quiser usar muitos deles, vá marcando as caixas. Quanto mais estilos usar, mais fontes serão carregadas, o que vai causar uma pequena perda no tempo de carregamento do blog; logo, se só pretende usar uma versão, carregue apenas ela. Veja o item 5.
Conjunto de caracteres. Dependendo do idioma do site ou blog, pode ser preciso usar caracteres mais extensos. Em condições normais, apenas o Latin é suficiente.
Código. Basta copiar o código fornecido e colá-lo no seu blog. O melhor lugar para fazer isso é dentro da seção <head>, assim a fonte será carregada logo no começo. Na guia @import, você consegue um trecho de CSS que vai importar a fonte direto pela folha de estilos. Se nenhuma das opções funcionar, ainda resta o código em Javascript.
Integrando a fonte ao blog. É o trecho de estilização que chama a fonte para funcionar; basta colar isso na sua folha de estilos e usar a font-family onde quiser.

Por exemplo, se quiser todos os cabeçalhos h1 com aquela fonte, use: h1 {font-family: ‘Lato’, sans-serif;}
Tempo de carregamento. Quanto mais próximo do vermelho estiver o “velocímetro”, mais aquela fonte vai pesar no carregamento da página que a usa. Então, lembre-se de usar web fonts com moderação para não deixar seu blog lerdo.