ReTabNews

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:

1. Fazer a conexão e autenticação com o site de fontes do google de forma assíncrona
1. 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)
1. 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