Fontes auto-hospedadas

As fontes auto-hospedadas são arquivos disponibilizados pelos seus próprios servidores, em vez de um provedor de fontes de terceiros (por exemplo, o Google Fonts).

É 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 fornecer uma fonte auto-hospedada o mais rápido possível: o uso de declarações de fonte inline e o uso do formato de fonte WOFF2.

  • Declarações de fonte inline: as declarações @font-face e font-family in-line no documento principal, em vez de incluir essas informações em uma folha de estilo externa, permitem que o navegador determine quais arquivos de fontes serão usados na página sem precisar esperar o download de outro arquivo de 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.

  • WOFF2: das fontes de fonte modernas, a WOFF2 é a mais recente, oferece a maior compatibilidade com navegadores e a melhor compactação. Por usar o Brotli, o WOFF2 faz a compactação em 30% melhor que o WOFF.

Para melhorar ainda mais a performance, use a subdefinição de fontes. O subconjunto de fontes é a prática de dividir um arquivo de fonte em subconjuntos menores, geralmente com o objetivo de remover glifos não utilizados. Isso pode reduzir significativamente o tamanho do arquivo de uma fonte. As ferramentas para criar subconjuntos de fontes incluem fontkit, subfont e glyphhanger.

Para mais informações sobre práticas recomendadas para fontes auto-hospedadas, consulte Como usar fontes auto-hospedadas.

Exemplo:

HTML

<head>
    <style>
        @font-face {
            font-family: 'Google Sans';
            src: url("Google Sans.woff2") format('woff2');
            font-display: swap;
        }
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Google Sans', sans-serif;
            font-size: 3em;
        }
    </style>
</head>