Design

Como usar fontes do Google Web Fonts

O repositório do Google fornece centenas de fontes para embutir em seus projetos online, e de graça.
Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Antes era complicado exibir fontes externas em web design. Além da pouca variedade com permissão de uso na internet, era complicado. Você precisava criar um arquivo a partir da fonte, no formato .EOT, para correta visualização em certos navegadores. Sem contar a parte de CSS para criar a estilização.

Fontes externas são as que o visitante da página não tem no próprio computador. Se você usar, por exemplo, a Helvetica no seu blog e o visitante não a tiver instalada, o navegador aplicará outra fonte, mudando o design original. Dependendo da situação, pode alterar totalmente a formatação da página e até torná-la ilegível, em casos de grande variação de tamanho entre a original e a substituta.

A vida dos designers web foi facilitada com sites como Fontsquirrel, que oferece pacotes com todo o kit para o @font-face. No arquivo já estão incluídos vários formatos da fonte, para total compatibilidade com os navegadores atuais, e até a regra em CSS para aplicá-la.

E para facilitar ainda mais, o Google (sempre ele) oferece uma grande facilidade, o Web Fonts. É uma coleção de fontes para web; basta copiar o código fornecido lá e aplicar em seu blog ou site. Sem maiores complicações como envio de arquivos para seu servidor.

Veja como é simples de usar.

🎓

Vamos supor que você gostou da fonte Press Start 2P, que quase ninguém tem instalada. Não será problema, pois ela será carregada do arquivo do Google.

Clicando em Pop-Out, você abre uma janela que exibe todos os caracteres disponíveis na fonte. Importante, pois se ela não tiver acentos e cedilha, apresentará erros com textos em português. Se for o caso, escolha outra fonte.

Pop out do Google web fonts
Clique em POP OUT…
Para ver informações sobre a fonte
…para ver informações sobre a fonte

Quando estiver certo de que quer mesmo usar aquela fonte, clique em Quick Use. Virão outras informações, vejamos o que são.

Informações de quick use do Google Web Fonts

1 – Escolha de estilos. Algumas fontes terão vários estilos próprios, como versões em itálico, negrito, leve… Se quiser usar mais de um, vá marcando as caixas. Quanto mais estilos usar, mais fontes serão carregadas, o que vai causar uma pequena perda no tempo de carregamento. Logo, se só pretende usar uma variação, carregue apenas ela. Veja o item 5.

2 – Conjunto de caracteres. Dependendo do idioma do site, pode ser preciso usar mais caracteres. Em condições normais, apenas o Latin é suficiente.

3 – Código. Basta copiar o código fornecido e colá-lo no seu site. 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.

4 – Integrando a fonte ao site. É 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: 'Press Start 2P', cursive; }

5 – Tempo de carregamento. Quanto mais próximo do vermelho estiver o “velocímetro”, mais aquela fonte vai pesar no carregamento da página. Então, lembre-se de usar web fonts com moderação para não deixar seu site lerdo.

Simples. Só não saia usando todas as fontes que encontrar, ou o reflexo no tempo de carregamento será cruel. É pra ser apreciado com moderação, muita moderação.

Visite o Google Web Fontse dê cara nova ao seu site. Se tiver alguma dúvida sobre uso do @font-face, leia também o artigo Tipografia em Web Design: @font-face à Prova de Erros.

Qualquer dúvida, comente.

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Deixe um Comentário

Pin