[Dúvida] Importação da fonte | HTML e CSS: responsividade com mobile-first

Olá Selly, tudo bem?

Escolher entre importar a fonte para o HTML ou para o CSS é uma dúvida bem comum no mundo de Front-end. Isso acontece principalmente porque pessoas diferentes, tem preferências diferentes e ensinam de forma diferente. Todavia, a principal diferença entre importar fontes do Google Fonts utilizando CSS e HTML é o local onde o código é inserido e a forma como a fonte é aplicada. Como assim? Te explico:

Ao importar fontes do Google Fonts com HTML, o código é inserido no cabeçalho da página entre as tags <head> e </head>. O código HTML define um link para o arquivo de estilo da fonte e pode ser referenciado em qualquer lugar da página usando a propriedade CSS "font-family". Por exemplo:

<head>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet">
</head>

Já ao importar fontes do Google Fonts com CSS, o código é inserido em um arquivo de estilo separado (com extensão .css) ou na seção <style> da página HTML. O código CSS define o link para o arquivo de estilo da fonte e pode ser referenciado em qualquer lugar da página usando a propriedade CSS "font-family". Por exemplo:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans');

Agora em relação a "boa prática", isto é, qual a prática mais usada, o mais comum para importar fontes do Google Fonts é através do CSS, principalmente porque a maioria dos projetos de Front-end já possuem um arquivo de estilo separado. Isso permite que você mantenha todo o estilo da sua página em um só lugar e torna mais fácil a manutenção do código.

Em caso de mais dúvidas, me coloco à disposição.

Grande abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!