Olá Renatoglima!
Para importar as fontes em um projeto com HTML de um provedor externo, como o Google Fonts, existem algumas maneiras:
Método 01 - Por Link HTML
Passo 01 - Selecionar as fontes
Você precisa selecionar quais fontes você quer utilizar (neste exemplo, estou utilizando a https://fonts.google.com/specimen/Roboto Thin (100)), e pegar o código correspondente na sidebar da direita:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
Passo 02 - Incluir os links no seu código
Agora é hora de incluir o código correspondente dentro do cabeçalho da sua página (tag head), ficando assim:
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
...
</head>
<body>
...
</body>
</html>
Deu para perceber que existem 3 links diferentes, sendo que eu selecionei somente uma fonte. As funcionalidades de cada um são:
-
- Fazer a conexão e autenticação com o site de fontes do google de forma assíncrona
-
- Fazer a conexão e autenticação com o site de arquivos estáticos do google (a fonte não precisa ser gerada a cada vez que uma pessoa quer a fonte. Ela é estática, e servida em um domínio a parte pelo próprio Google)
-
- Download de todas as fontes que você selecionou no site do Google Fonts (independente de variedade ou tipos de fontes, todas são baixadas na terceira linha somente)
Passo 03 - Começar a utilizar no CSS
Agora, você pode utilizar no seu código a fonte em questão, estilizando algum texto que queira, como por exemplo:
h1 {
font-family: 'Roboto', sans-serif;
}
É importante ressaltar, que caso ocorra algum erro em utilizar a fonte em questão (no caso, a Roboto), ele irá para a segunda opção que foi definida, que neste caso, foi a fonte sem serifa padrão do navegador do usuário
Método 02 - Importando com @import
Passo 01 - Incluir a importação da fonte no CSS
Este método pode não funcionar muito bem dependendo do compilador CSS que você utilize, ou alguns navegadores pode não ter o devido suporte.
Mas, para utilizar, basta incluir no seu CSS o seguinte:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
Passo 02 - Começar a utilizar no CSS
Agora, você pode utilizar no seu código a fonte em questão, estilizando algum texto que queira, como por exemplo:
h1 {
font-family: 'Roboto', sans-serif;
}
É importante ressaltar, que caso ocorra algum erro em utilizar a fonte em questão (no caso, a Roboto), ele irá para a segunda opção que foi definida, que neste caso, foi a fonte sem serifa padrão do navegador do usuário.
Espero ter ajudado!