O ensaio anterior desta série argumentou que muitas aplicações não deveriam servir fonte alguma. Este é para as superfícies em que o tipo merece seus bytes — porque "vale a pena carregar" é onde a engenharia começa, não onde ela termina. Uma webfont é uma dependência que bloqueia a renderização do conteúdo mais importante da página. Orce-a como tal.
Um arquivo, todos os pesos
A decisão de maior alavancagem é a arquitetura de arquivos. Uma família tradicional é servida em instâncias estáticas — regular, itálico, negrito, talvez um corte display — cada uma com sua própria requisição, facilmente 300–400 KB no total. Uma fonte variável carrega a mesma faixa (frequentemente mais: todos os pesos de 100 a 900) em um único arquivo que costuma pesar menos que dois estáticos.
Menos arquivos também significa menos oportunidades de carregamento parcial — nenhum lampejo de itálico-verdadeiro-com-negrito-falso enquanto o arquivo do negrito se atrasa. E os eixos extras do arquivo variável são funcionais: corpo óptico para texto pequeno, grade para temas escuros — capacidades, não peso morto.
Faça subsetting a sério
A maioria dos arquivos de fonte é composta, em sua maior parte, de caracteres que a sua interface nunca vai renderizar. O subsetting — cortar o arquivo para os sistemas de escrita e caracteres que você de fato usa — rotineiramente reduz uma fonte latina à metade, e o unicode-range permite manter cobertura mais ampla sem pagar por ela antecipadamente: declare o subconjunto latino e o subconjunto estendido como faces separadas, e o navegador baixa a extensão apenas quando um caractere correspondente aparece. Ferramentas como pyftsubset/fonttools transformam isso em uma etapa de build, não em um projeto artesanal. WOFF2 nem precisa ser dito; se você está servindo qualquer outra coisa em 2026, comece por aí.
font-display, escolhido com honestidade
O comportamento de carregamento é uma decisão de produto vestida de CSS:
blockesconde o texto enquanto a fonte carrega. Quase nunca defensável — você está trocando o tempo dos seus leitores pela vaidade da sua marca.swapmostra o fallback imediatamente e troca quando a fonte chega. Certo para superfícies de leitura — mas torna o momento da troca problema seu, que é o assunto da próxima seção.optionalusa a fonte apenas se ela já estiver em cache (grosso modo: instantâneo ou nunca). Para aplicações de alto desempenho que insistem em uma webfont, este é o ajuste honesto — a primeira visita é lida no fallback, todas as visitas seguintes recebem a fonte da marca, e nada jamais se desloca.
Engenharia da troca até a invisibilidade
Se você escolher swap, o deslocamento de layout é seu para eliminar. O ferramental moderno resolve isso quase perfeitamente: um @font-face de fallback construído sobre uma fonte local do sistema com size-adjust, ascent-override e descent-override ajustados para que o fallback ocupe o mesmo espaço da webfont. O texto renderiza instantaneamente no fallback ajustado; a webfont chega; nada se move. Este site faz exatamente isso — o fallback em Georgia da fonte display é escalado metricamente para que a troca seja uma mudança de voz, não uma mudança de layout.
Termine com a higiene de entrega: hospede você mesmo (uma CDN de fontes de terceiros é uma questão de privacidade e uma configuração de conexão de que você não precisa), faça preload do único arquivo crítico e defina cabeçalhos de cache imutáveis para que o custo seja pago uma vez por usuário, para sempre.
O orçamento completo de uma fonte de texto séria, feito desse jeito: um WOFF2 variável pré-carregado, com subsetting para os seus idiomas, ~40–90 KB, swap com um fallback metricamente compatível ou optional de saída. Isso é mais barato que a maioria das imagens de destaque — que era o padrão que o tipo tinha de atingir desde o começo.