Ola, boa tarde. Tenho uma duvida sobre fontes. Qual devo usar quando importo alguma fonte: o @import no CSS ou copiando o link e jogando no head no HTML?? Por exemplo, como podem ver nas imagens abaixo:
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!
Ola, boa tarde. Tenho uma duvida sobre fontes. Qual devo usar quando importo alguma fonte: o @import no CSS ou copiando o link e jogando no head no HTML?? Por exemplo, como podem ver nas imagens abaixo:
Oi, Stephanie. Tudo bem?
Ambas as formas funcionam, mas existem diferenças técnicas importantes sobre como o navegador carrega as informações. Vamos analisar cada uma para você escolher a melhor opção.
<link> no HTMLEsta é geralmente a melhor escolha para o desempenho do seu site. Ao colocar os links diretamente no <head> do HTML, conforme você mostrou na primeira imagem, o navegador consegue identificar a necessidade da fonte logo no início do carregamento.
preconnect que o Google Fonts fornece ajudam o navegador a "avisar" o servidor das fontes que uma conexão será feita, acelerando ainda mais o processo.@import no CSSComo você mostrou na segunda imagem (que está comentada), o @import fica dentro do seu arquivo CSS.
style.css, ler todo o conteúdo e só então descobrir que existe uma fonte para baixar. Isso cria uma "fila", o que pode atrasar a exibição correta do layout.<link> ganha.| Característica | Tag <link> no HTML | @import no CSS |
|---|---|---|
| Velocidade | Mais rápida (paralela) | Mais lenta (sequencial) |
| Organização | Fica no arquivo de estrutura | Fica no arquivo de estilo |
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!