Olá!! Na aula pede para copiar o link da fonte no google e colar no arquivo html. Aprendi em outra aula com a Rafa Ballerini copiar o @import e colar no arquivo css. Gostaria de saber qual a prática mais usada?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Olá!! Na aula pede para copiar o link da fonte no google e colar no arquivo html. Aprendi em outra aula com a Rafa Ballerini copiar o @import e colar no arquivo css. Gostaria de saber qual a prática mais usada?
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!