Desabilite seu adblock e script blocker para visualizar esta página

Como usar fontes grátis do google

Como usar fontes grátis do google

Postado em Fontes, Web design   - Tags , ,

Neste post irei mostrar como utilizar fontes grátis disponibilizadas pelo google nos seus projetos. A utilização de diferentes  fontes nos projetos é indispensável, pois como todos nós sabemos a diferenciação do site ajuda na audiência e fidelização dos seus usuários.

Para começar vamos buscar as fontes a serem utilizadas no projeto. URL: http://www.google.com/webfonts

Escolha uma fonte para fazer o primeiro teste. No meu caso irei utilizar a fonte: Courgette .

– Após escolher a fonte, clique em ADD TO COLLECTION.  Note que irá aparecer na barra azul que está em baixo na tela a sua fonte adicionada.

– Depois de escolher, clique em USE. Você será direcionado à página onde poderá “pegar” o código a ser inserido no HTML.

– No item 3, copie o código a ser inserido no html  (abaixo exemplo que utilizei).

 

– coloque este código entre a TAG <head></head> de seu projeto.

EX:

 

Note que utilizei a fonte dentro do estilo do corpo do site (body), ou seja, esta fonte estará em tudo que estiver dentro do meu código.

Caso queira utilizar outras fontes, utilize os mesmos passos acima para escolher e pegar o código da nova fonte. Lembre-se de declarar onde você quer colocar a nova fonte através de uma classe no css e depois na tag, como no exemplo abaixo:

 

Por enquanto é isso, qualquer dúvida, escreva abaixo ou utilize o formulário de email no rodapé.




shares