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
