Fontes web: WOFF2 são os 64% fáceis, o subsetting é os outros 30

12 julho 2026

Fontes bloqueiam a renderização e são grandes. Um único peso pode pesar mais que todas as imagens acima da dobra. Duas mudanças reduzem uma fonte web típica a uma fração do que um TTF bruto ocupa, e a maioria dos sites não faz nenhuma das duas.

WOFF2: os 64% de graça

WOFF2 é um empacotamento de fonte que comprime as tabelas de glifos com Brotli e uma transformação ajustada para dados de fonte. Não é uma tipografia diferente: é a mesma fonte, menor, e é suportada por todo navegador em uso.

Convertemos 40 fontes reais (TTFs do Google Fonts) para WOFF2:

TTF → WOFF2	Redução
mediana	−64%
intervalo	−41% a −83%
40 fontes no agregado	22 MB → 7 MB

Essa é a mudança de maior retorno que você pode fazer em uma fonte web, e não custa nada: mesmos glifos, mesma renderização, um passo a mais no build. Se você serve .ttf ou até .woff, está entregando de duas a três vezes mais bytes sem motivo.

Subsetting: os outros 30

Aqui está a parte que quase ninguém faz. Abra o TTF de uma Google Font e ele costuma carregar muito mais que o Latino: cirílico, grego, vietnamita, pontuação estendida, símbolos. Um site em inglês baixa tudo isso e não renderiza nada disso.

O subsetting descarta os glifos que uma página nunca vai usar. Reduzimos as mesmas 40 fontes a um intervalo Latino (0-2AF mais pontuação web comum e o euro) com hb-subset:

TTF → WOFF2, subset Latino	Redução
mediana	−81%
40 fontes no agregado	22 MB → 1 MB

Leia essa última linha de novo: 22 MB de TTF viram cerca de 1 MB ao converter para WOFF2 e manter só os glifos que uma página em Latino usa, um corte de 95%. O WOFF2 sozinho levou de 22 MB a 7 MB; o subsetting levou de 7 MB a 1 MB. Os dois se somam, e o segundo é onde está a surpresa.

Como fazer subsetting sem quebrar nada

O subsetting tem perdas no único sentido que importa: os glifos descartados somem. Faça isso de forma deliberada.

Descarte só o que você não serve. Um site em Latino faz subset para Latino. Um site multilíngue mantém os intervalos que renderiza.
Use unicode-range no @font-face. Sirva vários subsets (Latino, Latino estendido, Cirílico…) e deixe o navegador buscar só os que o texto de uma página de fato toca. É exatamente assim que o Google Fonts serve fontes, e você pode fazer o mesmo com as suas.
Cuidado com texto gerado pelo usuário. Se usuários podem digitar qualquer coisa (nomes, emoji, outros alfabetos), um subset estritamente Latino vai mostrar tofu (□) nos glifos ausentes. Mantenha um subset mais amplo, ou um fallback de fonte do sistema, para essas superfícies.
Hinting costuma ser descartável. Em telas modernas de alto DPI, o hinting do TrueType traz pouco ganho e custa bytes; removê-lo encolhe ainda mais o arquivo, mas teste se você precisa suportar Windows em baixo DPI.

O que o Patu faz com uma fonte

Envie um TTF, OTF ou WOFF ao Patu e ele devolve um WOFF2. Passe o texto ou os intervalos unicode que a página precisa e ele faz o subsetting no mesmo passo, o caminho dos 95%, não só o dos 64%.

# converte + faz subset para os glifos que essa página realmente usa
curl -X POST "https://patu.dev/v1/compress?subset-text=$(cat page.txt)" \
  -H "X-Api-Key: $PATU_KEY" -H "Content-Type: font/ttf" \
  --data-binary @Inter.ttf -o Inter.woff2

A conversão para WOFF2 é a mudança que todo mundo já deveria ter feito. O subsetting é a que transforma uma fonte de um item de peso real na página em um arredondamento.

Método e dados: 40 fontes reais (TTFs do Google Fonts); WOFF2 via woffify, subsetting via hb-subset para 0-2AF,20AC,2018-201F,2010-2014. As reduções são a mediana contra o TTF de origem; o agregado é a soma dos bytes das 40 fontes.