WOFF2

O WOFF2 foi desenvolvido pelo Google e se tornou uma Recomendação W3C em março de 2018. Baseia-se no conceito original do WOFF, mas substitui a compressão zlib pelo Brotli — um algoritmo de compressão também desenvolvido pelo Google — que atinge taxas de compressão significativamente melhores.

Mas o WOFF2 não é apenas "WOFF com melhor compressão". Ele introduz uma transformação de pré-processamento que reestrutura os dados da fonte antes da compressão, tornando-os substancialmente mais comprimíveis. Para contornos TrueType, isso significa aplicar codificação preditiva às coordenadas dos glifos — codificando cada ponto como um delta em relação a um valor previsto, em vez de uma coordenada absoluta. O resultado é um fluxo de bytes muito mais redundante que o Brotli consegue comprimir de forma agressiva.

Essa abordagem em duas etapas — pré-processamento específico para o domínio seguido de compressão de uso geral — é o motivo pelo qual o WOFF2 produz consistentemente os menores arquivos de fonte de qualquer formato.

O WOFF2 aplica um pipeline de compressão em duas fases aos dados da fonte de origem:

• Fase 1: Transformação de pré-processamento — transformações específicas de fonte reestrutuam os dados para maximizar a comprimibilidade. Para contornos de glifos TrueType, isso usa codificação preditiva de coordenadas — cada ponto é codificado como a diferença em relação a uma posição prevista, o que produz números muito menores. Transformações semelhantes são aplicadas a outras tabelas da fonte.
• Fase 2: Compressão Brotli — os dados pré-processados são então comprimidos com Brotli, que combina compressão de janela deslizante LZ77 com codificação Huffman e um dicionário estático integrado. O Brotli atinge 20-30% mais compressão que o zlib em dados típicos de fonte.

No lado do navegador, o processo se inverte: descompressão Brotli seguida de transformações inversas para reconstruir as tabelas originais da fonte. Apesar da etapa extra, a descompressão do WOFF2 é na verdade mais rápida do que a do WOFF1 — o Brotli foi projetado para decodificação rápida, e o arquivo menor é transferido mais rapidamente pela rede.

@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2');
  font-display: swap;
}

.icon { font-family: 'MyIcons'; }
.icon-home::before { content: '\E001'; }

Observe que listamos apenas um único src — somente WOFF2. Com mais de 97% de cobertura de navegadores, muitos projetos modernos não precisam mais de um formato de fallback. A diretiva font-display: swap instrui o navegador a mostrar o texto imediatamente usando uma fonte de fallback enquanto a fonte de ícone é carregada, evitando texto invisível.

O WOFF2 possui amplo suporte em todos os navegadores modernos. A única lacuna significativa é o Internet Explorer, que foi descontinuado pela Microsoft em junho de 2022.

A cobertura global combinada está em aproximadamente 97%. Os ~3% restantes consistem quase inteiramente em instalações legadas do IE e navegadores móveis muito antigos.

Para ilustrar a vantagem de compressão do WOFF2, aqui estão tamanhos típicos de arquivo para uma fonte de ícone contendo 200 glifos:

A economia se acumula com conjuntos de ícones maiores. Uma fonte com 500 glifos pode ter 200 KB em TTF, 120 KB em WOFF e apenas 82 KB em WOFF2. Ao longo de milhares de carregamentos de página, esses kilobytes se traduzem diretamente em tempos de renderização mais rápidos e menores custos de largura de banda.

Sempre. O WOFF2 deve ser o formato padrão para qualquer implantação de fonte de ícone baseada na web. Oferece os menores arquivos, a descompressão mais rápida e suporte de navegadores quase universal.

O único cenário em que você não usaria WOFF2 é quando está direcionando para o Internet Explorer — nesse caso, combine-o com WOFF como fallback:

@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2'),
       url('icons.woff') format('woff');
  font-display: swap;
}

Os navegadores modernos carregarão o arquivo WOFF2; o IE 11 recorrerá ao WOFF. Todos recebem a fonte, todos recebem ela comprimida.