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
efont-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 depreload
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.