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:
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!