Google Fonts
Informações
Eu escolhi esta fonte. Destaquei-a com a cor azul para mostrar qual fonte escolhi.
Passo 2
Clique na fonte que você escolheu e depois em "Obter a fonte".
Ex.:
Eu destaquei de vermelho o botão para obter a fonte.
Passo 3
Talvez apareçam algumas derivações da fonte. Você tem duas opções: pode baixar tudo para ter todas as derivações da fonte (o que eu não recomendo para quem está aprendendo a colocar uma fonte pela primeira vez), então recomendo que clique diretamente ao lado da fonte, no botão de download, que vou destacar para você entender como funciona.
Ex.:
Eu destaquei de vermelho o lugar para realizar o download da fonte.
Passo 4
Depois de realizar o download, você precisa mover o arquivo para a pasta onde está desenvolvendo o código e, em seguida, descompactá-lo. Para realizar a descompactação, é necessário ter o WinRAR instalado no seu computador. Segue o link para baixar a ferramenta, caso você não tenha:
Passo 5
Depois de realizar a descompactação, mova o arquivo para dentro da pasta onde você está programando.
Ex.:
Passo 6
Agora você precisa converter o arquivo para que ele possa ser integrado ao seu código. Para realizar a conversão, é necessário acessar uma ferramenta. Existem várias ferramentas que fazem essa conversão, mas vou mostrar uma. Segue o link do site onde você vai enviar o arquivo e realizar a conversão:
Passo 8
Converta a fonte para o formato destacado na imagem.
Ex.:
Passo 9
Converta e realize o download do arquivo, depois mova-o para dentro da pasta do seu código.
Ex.:
Passo 10
Agora vá para o código para aplicar a fonte. Segue o código:
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: "?";
src: url("?") format("woff2");
font-weight: bold;
font-style: normal;
}
#container {
font-family: ?;
}
</style>
</head>
<body>
<h1>Usando Web Fontes</h1>
<p id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In euismod nibh sit amet justo cursus, eget posuere arcu pharetra.
Donec vestibulum, lectus non consectetur condimentum, ex purus
luctus lectus, at lacinia augue sem euismod diam.
</p>
</body>
</html>Passo 11
Na parte do código
font-family: "?";
você vai substituir o ponto de interrogação pelo nome da fonte.
Na parte do código
src: url("?.woff2");
você vai substituir ?.woff2 pelo URL da fonte.
E depois, lá no #container, apague a interrogação e coloque o nome da fonte novamente.
Ex.:
Pronto, agora é só executar.
Olha como ficou o meu:
