Importar Google Fonts em CSS

1. Usando a regra @import para importar a fonte do Google em CSS
2. Usando a tag link para importar as Google Fonts em CSS

Neste tutorial, aprenderemos alguns métodos para importar Google Fonts em CSS.

Usando a regra @import para importar a fonte do Google em CSS

A regra CSS @import é usada para importar outra folha de estilo em uma folha de estilo. Podemos especificar a folha de estilo na função url() e como uma string.

Também podemos usar a regra @import para importar fontes externas em CSS. Por exemplo, podemos usar as fontes google na função url() e definir a fonte com a propriedade font-family.

O Google Fonts tem variedades de fontes de onde podemos escolher. Podemos obter o URL da fonte no site.

Por exemplo, vá para o site Google Fonts e escolha a fonte Roboto. Em seguida, clique no botão de rádio @import na barra lateral à direita.

Em seguida, copie o URL entre a tag style. Da mesma forma, em HTML, crie as tags h1 e p.

Em CSS, escreva a regra @import no topo da folha de estilo e cole o URL da fonte Roboto dentro da função url(). Selecione a fonte Outfit e obtenha o URL.

Em seguida, selecione a tag h1 e use a propriedade font-family para definir a fonte Outfit. Da mesma forma, defina a fonte Roboto no parágrafo.

Desta forma, podemos importar Google Fonts em uma folha de estilo.

No entanto, o uso da regra @import para importar Google Fonts não é recomendado. É porque as fontes não aparecerão na página da web a menos que o arquivo seja obtido.

Código de exemplo:

<h1> Title </h1>
<p>This is Roboto font.</p>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');

h1 {
 font-family: 'Outfit', sans-serif;
}

p {
 font-family: 'Roboto', sans-serif;
}

Usando a tag link para importar as Google Fonts em CSS

A tag link é a forma mais apropriada de importar fontes google em HTML. A tag link é incentivada porque pré-carrega a fonte.

Podemos especificar o URL da fonte no atributo href da tag link. Podemos gerar todas as tags link a partir do site Google Fonts.

Por exemplo, vá para o site Google Fonts e escolha a fonte Comforter Brush. Selecione o botão de rádio link e copie as tags link geradas.

Em seguida, cole as tags em HTML e crie uma tag p e escreva algum texto dentro dela. Em seguida, selecione a tag p em CSS e defina a propriedade font-family como Comforter Brush.

Usamos preconnect para o atributo rel nas duas primeiras tags link. Ele permite que o navegador saiba que o usuário precisa dos recursos no atributo href para que o navegador possa iniciar uma conexão preemptiva com os recursos.

Desta forma, podemos usar a tag link para importar as fontes google em CSS.

Código de exemplo:

<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=Comforter+Brush&display=swap" rel="stylesheet"> 

<p>Comforter Brush font.</p>

p {
 font-family: 'Comforter Brush', cursive;
}