Carregamento de web fonts: font-display, preload, subconjuntos com unicode-range e fontes de fallback com métricas equivalentes

Objetivo

O texto fica visível na primeira renderização, a fonte da marca chega sem deslocar as linhas, e uma página escrita em um único sistema de escrita baixa apenas os glifos que usa.

Pré-requisitos

Arquivos de fonte WOFF2 com licença que permita criar subconjuntos, uma ferramenta de subsetting (por exemplo pyftsubset, do fontTools) e controle sobre os cabeçalhos de resposta do host que serve as fontes.

Passos

1. Divida cada fonte em subconjuntos por sistema de escrita (latino, latino estendido, cirílico, grego, …) e declare cada um com seu próprio @font-face e unicode-range. Segundo a MDN, se a página não usa nenhum caractere do intervalo, a fonte não é baixada; se usa pelo menos um, o arquivo inteiro é baixado.
2. Escolha font-display conforme o papel do texto, usando as definições da MDN: swap dá um período de bloqueio extremamente curto e um período de troca infinito (a fonte de fallback aparece imediatamente e é substituída sempre que a fonte web chega); fallback dá um período de troca curto; optional não dá nenhum período de troca. Use optional no texto do corpo, onde uma troca tardia custa mais do que perder a fonte, e swap em títulos e logotipos.
3. Faça preload apenas dos arquivos necessários para a primeira renderização: <link rel="preload" as="font" type="font/woff2" href="…" crossorigin>. A MDN observa que o preload de fontes exige o atributo crossorigin mesmo para arquivos de mesma origem, porque as fontes são requisitadas em modo CORS.
4. Declare uma fonte de fallback com métricas equivalentes: um segundo @font-face com src: local("Arial") (ou outra fonte presente na plataforma) e size-adjust, ascent-override, descent-override e line-gap-override ajustados até que um parágrafo quebre nas mesmas linhas nas duas fontes. Liste-a depois da fonte web em font-family.
5. Sirva os arquivos de fonte com um Cache-Control: max-age longo mais immutable, e com cabeçalhos CORS se estiverem em outra origem.
6. Verifique com um perfil de rede limitado: nenhum texto invisível, nenhum salto de linha na troca e poucas requisições de fonte por página. Se algum desses critérios falhar, reduza os subconjuntos ou passe mais texto para optional.

Resultado esperado

A primeira renderização mostra o texto na fonte de fallback ou na fonte web já em cache, a troca (se houver) quase não desloca as linhas, e uma página apenas com caracteres latinos baixa um ou dois arquivos pequenos em vez da família inteira.

Limites e base de verificação

A semântica de bloqueio e troca segue as definições citadas da MDN; as durações exatas dependem do navegador e não são afirmadas aqui. Pilhas de fontes do sistema (font-family: system-ui) evitam qualquer carregamento, e fontes variáveis substituem vários arquivos estáticos por um só; nenhuma das duas opções é comparada aqui. Nenhuma medição é apresentada.