Como utilizar fontes do Google Web Fonts em seu site

Veja como utilizar em seu site o fabuloso acervo de fontes Google Web Fonts.

Com a chegada do CSS3 uma grande e favorável mudança foi a chegada de Webfonts, muitas barreiras eram enfrentadas para se ter um site diferenciado em relação as fontes, com a maioria dos usuários utilizando apenas as fontes padrões dos seus sistemas operacionais.

Uma das formas mais simples e garantidas que eu recomendo são as fontes do Google Web fonts, pois são fontes próprias para web e todas testadas e aprovadas pela plataforma google.

Além da segurança de usar fontes do Google Web Fonts, temos também a facilidade, sem precisar fazer download de nada, apenas copiando o caminho da fonte desejada que já está hospedada nos servidores do google e especificando o seu nome no seu arquivo CSS.

Se deseja um exemplo temos aqui mesmo no CriarSites. Se você está lendo este tutorial essa é uma fonte do google, a fonte Ubunto. Ela não é a única pois também utilizo nos títulos.

Veja como é fácil utilizar fontes Google Web Fonts.

Acesse o site do Google Web Fontes e siga os passos abaixo.

como-usar-fontes-diferentes-google-web-fontes-01

Escolha a fonte que deseja inserir em seu site e clique em: Quick-use. Você será direcionado a página de configurações da fonte escolhida.

como-usar-fontes-diferentes-google-web-fontes-02

Escolha o estilo da font. Esse estilo varia de acordo com cada fonte.

como-usar-fontes-diferentes-google-web-fontes-03

Logo temos três opções de incorporação:

HTML por código inserindo o caminho na tag head.

CSS @font-face especificando o caminho no seu arquivo.

Javascript incorporando o script fornecido pelo site em algum local em seu site, de preferencia head ou footer.

Eu recomendo o caminho no arquivo CSS, mais prático e sem conflitos.

como-usar-fontes-diferentes-google-web-fontes-04

Logo após especificar o caminho da fonte desejada a fonte está instalada e pronto para usar, temos que utilizar o nome específico que o site fornece para funcionar corretamente.

Caminho para incorporação no arquivo CSS.

Utilizando a fonte na tag desejada exemplo.

O Google Web Fonts tem um acervo de mais de 600 fontes muito elegantes. É praticamente impossível não achar uma que agrade seu estilo e estilo de seu site.

Espero que esta rápida dica te ajude a melhorar suas páginas deixando a leitura de seus usuários mais confortável.

Qual é seu estilo preferido? Deixe seu comentário para que outros usuários possam ver a melhor opção e experiências com Google Web Fonts.

Até a próxima! Abraço!

Leave a Reply

3 comments

  1. Adilson Rumão

    Engraçado a fonte no FireFox fica muito mais bonita se comparada no Chrome. Parece que ela fica mais cerrilhada no Chrome tem alguma explicação para isso?

    Valeu pelo post.

    • Então Adilson, eu também já percebi essa diferença, mas não bem o certo o porque ocorre está falha estranha, pode ser algum formato de fonte que não se adapta corretamente no navegador, mas as fontes do google são boas em todos. Abraço!

  2. Altemar

    Obrigado amigo pelo esclarecimento!

Pin It on Pinterest

Shares

Compartilhe!

Mostre esse post para seus amigos.