Mitigando eficazmente atrasos no carregamento de fontes na renderização da Web

A incorporação de fontes personalizadas via @font-face é uma prática comum em web design, mas pode introduzir um efeito de oscilação onde o o texto é inicialmente renderizado na fonte padrão do sistema e depois muda para a fonte personalizada após sua conclusão. Esse atraso indesejável surge do carregamento assíncrono de arquivos de fonte.

Carregamento preventivo de fontes com "Pré-carregamento"

Para minimizar esse atraso, a solução padrão do setor é aproveitar o atributo HTML de pré-carregamento suportado por navegadores modernos. Este atributo permite que o navegador priorize o carregamento de arquivos de fonte antes de renderizar o conteúdo da página.

Ao incorporar o pré-carregamento, você pode instruir o navegador a iniciar o carregamento do arquivo de fonte especificado de forma assíncrona, permitindo que ele esteja pronto para use quando a página solicitar a renderização do texto. O resultado é uma transição perfeita, onde a fonte personalizada é aplicada sem qualquer atraso perceptível.

Por exemplo, considere o seguinte trecho de código:

Recursos adicionais para domínio

Para obter mais informações sobre o tópico, recomendamos explorar os seguintes recursos:

• [Posso usar: link-rel- pré-carregamento](https://caniuse.com/#feat=link-rel-preload)
• [Documentação para rel=preload - MDN](https://developer.mozilla.org/en-US/docs/Glossary/Prefetch_and_preload)
• [Dicas de pré-carregamento para fontes da Web - Bram Stein](https://bramstein.com/blog/ 14/01/2013/preload-hint-web-fonts/)