É extremamente importante enviar fontes rapidamente: a entrega mais rápida de fontes não só significa que o texto vai ficar visível para o usuário mais cedo, mas também tem um grande impacto sobre a mudança de layout ou não de uma fonte. Se uma fonte não puder ser enviada antes de ser necessária, normalmente haverá uma mudança de layout quando a fonte for trocada. O tamanho dessa mudança de layout pode variar dependendo de quanto a fonte substituta corresponde à fonte da Web. Para conferir esse fenômeno em ação, confira a demonstração e compare as mudanças de layout que ocorrem em uma conexão rápida e em uma conexão lenta.
O exemplo abaixo combina duas técnicas de desempenho para carregar uma fonte de terceiros
o mais rápido possível: o uso de declarações de fonte inline e o uso de dicas
de recurso preconnect
. Embora este snippet de código demonstre como
carregar fontes do Google Fonts, essas técnicas
também se aplicam a outros provedores de fontes de terceiros.
Declarações de fontes inline: inserir declarações
font-family
no documento principal em vez de incluir essas informações em uma folha de estilo externa permite que o navegador determine quais arquivos de fontes serão usados na página sem precisar esperar o download de outro arquivo da folha de estilo. Isso é importante porque, em geral, os navegadores não fazem o download de arquivos de fonte até saberem que estão sendo usados na página. Na maioria das situações, é melhor usar declarações de fonte inline no uso depreload
para carregar fontes.Pré-conexão: a maneira recomendada de carregar o Google Fonts é usar a tag
<link>
com dicas de recursospreconnect
. A dica de recursopreconnect
estabelece uma conexão inicial com a origem de terceiros. No snippet de código abaixo, a primeira dica de recurso configura uma conexão para fazer o download da folha de estilo de fonte. A segunda dica configura uma conexão para fazer o download de arquivos de fonte.
Exemplo:
<head>
<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=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<style>
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Zen Tokyo Zoo', sans-serif;
font-size: 3em;
}
</style>
</head>