Artigo original: How to load web fonts to avoid performance issues and speed up page loading
Escrito por: Mattia Astorino
Web fonts personalizadas são usados em todos os lugares e no mundo inteiro, mas muitos (e são muitos!) sites carregam essas fontes de modo inadequado. Isso causa vários problemas para o carregamento da página, como questões de desempenho, tempo de carregamento maior, renderização bloqueada e fontes trocadas durante a navegação.
Vejo muitos desenvolvedores ignorando essas questões - ou, talvez, cometendo os mesmos erros repetidamente somente porque "foi o jeito que sempre fizeram", mas, por sermos desenvolvedores para a web, precisamos ser capazes de nos adaptarmos em um ambiente de constante mudança.
É a hora de interromper esse ciclo e começar a fazer o que é certo. Aqui temos quatro passos a considerar ao carregar uma fonte personalizada da web font:
- Uso do formato de fonte correto
- Fontes pré-carregadas
- Uso da declaração correta de font-face
- Evitar texto invisível durante o carregamento da fonte.
Vamos tratar desses pontos, um de cada vez.
Uso do formato de fonte correto
Existem muitos formatos de fonte que podem ser usados na web, mas apenas dois formatos são realmente necessários se você não precisar dar suporte a versão 8 do Internet Explorer (IE) ou anteriores: a woff e a woff2. Esses são os dois únicos tipos de arquivo que você deve usar, pois eles são comprimidos no formato gzip por padrão (sendo, portanto, muito pequenos), são otimizados para a web e são totalmente suportados pelo IE 9 e versões posteriores, assim como por todos os outros navegadores evergreen (navegadores com atualização automática).
Fontes pré-carregadas
Ao usar fontes personalizadas, você deve informar ao navegador que ele deve pré-carregar as fontes usando a definição adequada com rel="" e seus atributos:
<link rel="preload" as="font" href="/fonts/custom-font.woff2" type="font/woff2" crossorigin="anonymous"><link rel="preload" as="font" href="/fonts/custom-font.woff" type="font/woff2" crossorigin="anonymous">Observe que o uso de crossorigin aqui é importante; sem esse atributo, a fonte pré-carregada é ignorada pelo navegador e um novo fetch acaba ocorrendo. Isso se dá porque espera-se que as fontes sejam obtidas (em inglês, "fetched") de maneira anônima pelo navegador. A solicitação de pré-carregamento só pode ser tornada anônima usando esse atributo.
No exemplo acima, os atributos rel="preload" as="font" solicitarão ao navegador que inicie o download dos recursos solicitados assim que for possível. Eles também informarão ao navegador que essa é uma fonte. Assim, o navegador pode priorizá-la na fila de recursos. Usar as dicas de pré-carregamento causará um impacto significativo no desempenho da fonte da web e no pré-carregamento inicial. Os navegadores que dão suporte às dicas de pré-carregamento e prefetch começarão a fazer o download das web fonts assim que tiverem visto a dica no arquivo de HTML e não aguardarão mais pelo CSS.
Em vez delas, você pode usar o atributo rel="prefetch" para informar ao navegador que ele deve preparar o download dos recursos que poderão ser exigidos durante o carregamento da página ou ações do usuário, de modo que ele possa atribuir uma prioridade baixa a esses recursos.
CUIDADO:
Ao usar uma CDN, como o Google Fonts, certifique-se de que os arquivos de fonte que você está pré-carregando correspondem àqueles que estão no CSS. As fontes podem ser atualizadas regularmente e, se você estiver pré-carregando uma versão anterior usando o CSS no lugar de uma nova, pode acabar baixando duas versões da mesma fonte e desperdiçando a largura de banda do usuário. Considere o uso de <link rel="preconnect"> para facilitar a manutenção.
Uso da declaração correta de font-face
Declarar uma família de font-face é muito simples e devemos ter cuidado com certas coisas na hora de fazê-lo. Aqui temos um exemplo correto de declaração de uma font-family personalizada:
@font-face { font-family: 'Custom Font'; font-weight: 400; font-style: normal; font-display: swap; /* Ler o próximo ponto */ unicode-range: U+000-5FF; /* Fazer apenas o download dos glifos latinos */ src: local('Custom Font'), url('/fonts/custom-font.woff2') format('woff2'), url('/fonts/custom-font.woff') format('woff');}Aqui temos o intervalo Unicode em Google Web Fundamentals.
Como você pode ver, usamos somente fontes otimizadas (woff e woff2) e informamos ao navegador para carregar somente o intervalo de glifos necessário (de U+000 a U+5FF), mas essa propriedade não evita que os navegadores façam o download da fonte inteira. Também temos outras duas coisas que precisamos observar: a função local() e a ordem de declaração da fonte.
A função local() permite que os usuários utilizem sua cópia local da fonte se ela estiver presente (imagine as fontes Roboto que já vem pré-instaladas no Android) em vez de fazer o download delas a todo momento.
A ordem de declaração das fontes também é importante, pois o navegador iniciará a busca dos recursos seguindo a ordem da declaração. Se ele der suporte ao formato woff2, ele fará o download da fonte. Se não reconhecer o formato do recurso, buscará o próximo e assim por diante.
Se quiser realmente usar fontes eot e ttf, certifique-se de adicioná-las ao final da declaração do src.
Recursos
Evitar texto invisível durante o pré-carregamento da fonte
As fontes geralmente são arquivos grandes, que demoram a carregar, mesmo quando compactadas no formato gzip. Para lidar com isso, alguns navegadores ocultam o texto até que a fonte seja carregada (o "flash do texto invisível"). Você pode evitar o "flash" e exibir o conteúdo para os usuários imediatamente usando inicialmente uma fonte do sistema e substituindo-a após o carregamento.
No exemplo de @font-face anterior, você deve ter percebido a declaração de font-display (texto em inglês). O valor swap informa ao navegador que o texto usando essa fonte deve ser exibido imediatamente usando uma fonte do sistema. Quando a fonte personalizada estiver pronta, a fonte do sistema será substituída.
Se o navegador não der suporte a font-display, ele continuará a seguir seu comportamento padrão para o carregamento das fontes.
Comportamentos padrão do navegador quando uma fonte não está pronta para uso:
O Edge usa uma fonte do sistema até que a fonte personalizada esteja pronta para uso, substituindo a fonte do sistema quando ela estiver.
O Chrome ocultará o texto por até 3 segundos. Se o texto ainda não estiver pronto, ele usará uma fonte do sistema até que a fonte personalizada esteja pronta.
O Firefox ocultará o texto por até 3 segundos. Se o texto ainda não estiver pronto, ele usará uma fonte do sistema até que a fonte personalizada esteja pronta.
O Safari ocultará o texto até que a fonte esteja pronta.
Testes
Os links abaixo testam a "versão padrão" e a contrastam com a versão otimizada:
Resultados
Conclusão
Levar em consideração essas otimizações básicas melhorará a UX em geral de seu produto digital. Devemos levar em conta situações nas quais a velocidade de conexão não é a ideal ou quando as pessoas não têm tempo de esperar por vários segundos enquanto sua aplicação/site está sendo completamente carregado até se tornar navegável.
Esses avanços, especialmente em projetos grandes, são obrigatórios para melhorar a experiência geral do usuário, não necessitando de muito esforço para colocá-los em prática.
Devemos trabalhar juntos para tentar consertar a web.