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