Fontes de terceiros

É 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 de preload para carregar fontes.

  • Pré-conexão: a maneira recomendada de carregar o Google Fonts é usar a tag <link> com dicas de recursos preconnect. A dica de recurso preconnect 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:

HTML

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