Carregamento de fontes web: font-display, preload e subsetting
Carregamento de fontes web
Carregamento de fontes web: font-display, preload, subsetting | We.Inc
Veja o que cada valor de font-display faz com um simulador de linha do tempo, depois use preload, preconnect, subsets com unicode-range e métricas de fallback ajustadas para acabar com o layout shift.
Carregar fontes rápido se resume a quatro passos: avisar o navegador sobre a fonte cedo (preconnect ou preload), enviar arquivos WOFF2 pequenos com apenas os caracteres de que você precisa, escolher um valor de font-display adequado ao texto e dimensionar a fonte de fallback para combinar, para que nada pule. Use font-display: optional quando evitar layout shift for o mais importante.
Valores de font-display em resumo
Valor
Texto durante o carregamento
Quando a fonte chega tarde
Indicado para
Fallback quase na hora
Sempre é trocada
Texto de corpo que precisa aparecer na hora
Fallback quase na hora
Não é trocada; o fallback fica
Menor layout shift
Fallback quase na hora
Trocada só em até cerca de 3s
Um meio-termo
Invisível por até cerca de 3s
Sempre é trocada
Fontes de ícones, logos feitos com tipografia
O navegador decide
O navegador decide
Deixar a decisão com o navegador
As fontes são um dos poucos recursos que podem esconder o seu texto ou empurrar o layout de um lado para o outro. Arraste o controle abaixo para definir quanto tempo uma fonte leva para chegar e veja o que cada valor de font-display mostra a cada momento, depois copie os padrões de carregamento que mantêm as páginas estáveis.
Ajuste o controle para o tempo que a sua fonte leva para baixar em uma conexão lenta.
Leia cada linha: cinza é texto invisível, âmbar é a fonte de fallback, azul é a fonte web.
Repare em quais valores trocam de fonte tarde. Uma troca tardia é quando o texto visível se reorganiza.
Copie os trechos de preload, subsets com unicode-range e fallbacks ajustados.
Fontes auto-hospedadas: coloque as regras @font-face inline no head para o navegador encontrá-las sem esperar outra folha de estilo.
Faça preload de apenas um ou dois arquivos críticos. Fazer preload de todos os pesos concorre com as suas imagens e scripts.
Sempre adicione crossorigin ao preload de uma fonte, mesmo para arquivos no seu próprio domínio, senão o navegador baixa o arquivo duas vezes.
Sirva WOFF2. Ele comprime melhor que o WOFF e todos os navegadores atuais o leem.
Mantenha uma família genérica adequada no fim de toda lista de font-family, para o texto continuar aparecendo se o download falhar.
Perguntas frequentes
O que font-display: swap faz?
Ele dá à fonte um período de bloqueio extremamente curto, que a especificação CSS Fonts recomenda manter em 100ms ou menos, e um período de troca infinito. O texto aparece na fonte de fallback quase na hora e passa para a fonte web assim que ela termina de carregar.
font-display: swap é ruim para o CLS?
Pode ser. Se o fallback e a fonte web tiverem larguras ou alturas de linha diferentes, a troca tardia move o texto e o conteúdo abaixo dele. Corrija isso com size-adjust e com os overrides de ascent, descent e line-gap no fallback, ou use optional.
Por que a minha fonte com preload é baixada duas vezes?
As fontes são buscadas em modo CORS anônimo, então o link de preload precisa do atributo crossorigin mesmo quando o arquivo está na mesma origem. Sem ele, o preload não corresponde à requisição real e a fonte é baixada de novo.
Devo fazer preload das Google Fonts?
Normalmente, não. O web.dev alerta que o preload ignora parte da negociação de conteúdo do próprio navegador, incluindo o unicode-range, então você pode acabar baixando um subset que a página nunca usa. Em vez disso, faça preconnect para fonts.googleapis.com e fonts.gstatic.com, ou hospede a fonte você mesmo e faça preload do seu próprio arquivo.
Como o unicode-range economiza bytes?
Quando uma regra @font-face tem unicode-range, o navegador só baixa aquele arquivo se a página usar pelo menos um caractere do intervalo. Divida uma fonte em arquivos de latim, cirílico ou grego e cada visitante baixa apenas os alfabetos presentes na página.
A linha do tempo de exibição da fonte
Quando um texto precisa de uma fonte que ainda não chegou, o navegador passa por até três períodos. No período de bloqueio, ele monta o texto com um fallback invisível. No período de troca, mostra o fallback e troca quando a fonte chega. Depois vem o período de falha, em que o fallback fica de vez.
O font-display só muda quanto duram os dois primeiros períodos. Os números do simulador são os que o rascunho do CSS Fonts Level 4 recomenda; os navegadores podem usar tempos um pouco diferentes.
Por que trocas tardias causam layout shift
Até o texto invisível ocupa espaço, medido com a fonte de fallback. Quando a fonte real o substitui, cada linha pode ficar mais larga ou mais estreita, então os parágrafos quebram de outro jeito e tudo o que vem abaixo se move. Esse movimento entra na conta do Cumulative Layout Shift.
Há duas soluções. Evite a troca tardia por completo com optional, ou faça o fallback ocupar o mesmo espaço da fonte web usando size-adjust e os descritores de override de métricas em uma face de fallback com local().
Subsetting
Uma fonte com milhares de glifos é um desperdício para uma página que usa uma centena. Ferramentas de subsetting removem os caracteres não usados antes de você enviar o arquivo, e o unicode-range deixa o navegador pular arquivos inteiros de que não precisa.
Para um trecho curto de texto de destaque, a API do Google Fonts aceita um parâmetro text= e devolve um arquivo só com esses caracteres. É útil para um logo ou um único título em uma fonte decorativa.
Fonte auto-hospedada com preload
Faça preload do único arquivo que a primeira tela precisa
as, type e crossorigin precisam estar todos presentes. A regra @font-face fica inline no head para ser descoberta na hora.
Arquivos divididos com unicode-range
Subsets latino e cirílico de uma mesma família
As duas regras compartilham o nome da família. Uma página escrita só em inglês nunca baixa o arquivo cirílico.
Um fallback dimensionado para combinar
Fallback local ajustado para reduzir o layout shift
Os números são de exemplo: meça a sua fonte em relação ao fallback e ajuste até que as duas se alinhem.
Google Fonts com preconnect e um subset para um título
A segunda folha de estilo pede apenas as letras do texto do logo, o que mantém esse arquivo minúsculo.
Bloqueio curto (3s recomendados), troca infinita
Bloqueio extremamente curto (100ms ou menos), troca infinita