loader image

Como usar as fontes do Google Fonts

Antigamente, as versões anteriores do HTML não permita utilizar fontes legais, tínhamos que usar as fontes padrões do computador como Arial, Times New Roman, Curier New, Verdana, etc…

O código era assim

<font face="verdana">Este é um texto com a fonte verdana</font>

No entanto, este código não é utilizado mais e alguns navegadores já não o entende.

Com a versão mais recente do HTML 5 a forma de utilizar fontes mudou e torno-se possível utilizar fontes variadas e o Google criou um serviço gratuito chamado Googe Fonts que permite que você facilmente possa escolher uma fonte legal e acrescentar em seu site.

Conhecendo o Google Fonts

Para conhecer as fontes do Google Fonts acesse o site https://fonts.google.com você terá acesso à dezenas de fontes legais que podem ser utilizadas em suas páginas HTML.

Escolhendo uma fonte para a minha página

Dentro do site do Google Fonts, escolha uma fonte da sua preferência e cliquei no botão de + existente em cada quadro de fonte, veja a imagem;

Quando você clicar no botão +, será mostrado um alerta indicando que você selecionou uma família de fonte no rodapé do site como mostra a imagem;

O termo “família de fontes” se refere ao fato de que uma única fonte pode ter variações.

 

Como usar a fonte escolhida na sua página

Para que possamos utilizar as fontes é necessário termos uma página HTML já programada, vamos considerar este código como exemplo;

<html>
<head>
 <meta charset="utf-8">
 <title>
 Página sem o Google Fonts
 </title>
</head>
 
<body>
 <h1>Olá Mundo</h1>
 <p> Esta é uma página usando o Google Fonts </p>
 <p> Vamos colcar várias fontes legais aqui...</p>
</body>
 
</html>

Agora vamos para a mágica. No Google Fonts, clique no alerta que indica que há uma fonte selecionada, a área de alerta irá se expandir mostrando alguns códigos como mostrado na imagem a seguir;

 

Perceba que ele te mostrou dois códigos, o primeiro código deve ser copiado e colado dentro do <head> da sua página, veja;

Usando um CTRL + C e CTRL + V teremos então o seguinte código;

<html>
<head>
 <meta charset="utf-8">
 <title>
 Página sem o Google Fonts
 </title>
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
 
<body>
 <h1>Olá Mundo</h1>
 <p> Esta é uma página usando o Google Fonts </p>
 <p> Vamos colcar várias fontes legais aqui...</p>
</body>
 
</html>

 

Mas isso não é suficiente para que a fonte funcione, precisamos agora dizer a nossa página que queremos usar a fonte que escolhemos em todo o corpo do documento (body), para isso vamos usando um atributo chamado style, o style  é responsável pela estilização do HTML.

Nós devemos passar para o style o segundo código mostrado no Google Fonts, veja;

O código então ficará assim

<html>
 <head>
 <meta charset="utf-8">
 <title>
 Página sem o Google Fonts
 </title>
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 </head>

<body style="font-family: 'Roboto', sans-serif;">
 <h1>Olá Mundo</h1>
 <p> Esta é uma página usando o Google Fonts </p>
 <p> Vamos colcar várias fontes legais aqui...</p>
 </body>

</html>

Agora vamos para os resultados;

SEM GOOGLE FONTS

COM GOOLE FONTS

Deixe seu comentário