Como usar fontes grátis do google

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).

<link href='http://fonts.googleapis.com/css?family=Courgette&subset=latin-ext,latin' rel='stylesheet' type='text/css'>

 

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

EX:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
    <link href='http://fonts.googleapis.com/css?family=Courgette&subset=latin-ext,latin' rel='stylesheet' type='text/css'>
    <style type="text/css">
     body{
           font-family: 'Courgette', cursive;
           font-size: 50px;
           color:#F00;
}
</style>
</head>
<body>
<p>texto com a fonte disponibilizada pelo google</p>
<p>segundo texto com fonte diferente</p>
</body>
</html>

 

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:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<link href='http://fonts.googleapis.com/css?family=Courgette&subset=latin-ext,latin' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Plaster&subset=latin-ext,latin' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
       font-family: 'Courgette', cursive;
       font-size: 50px;
       color:#F00;
}
.fonte2{
      font-family: 'Plaster', cursive;
      font-size:36px;
      color:#F00;
}
</style>
</head>
<body>
     <p>texto com a fonte disponibilizada pelo google</p>
      <p class="fonte2">segundo texto com fonte diferente</p>
</body>
</html>

 

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

Deixe seu comentário abaixo

Loading Facebook Comments ...