FlowingDev

Web Fonts, explicadas: emagrecendo a tipografia para uma web mais rápida

Aprenda os fundamentos dos formatos de web fonts como WOFF2 e como o subsetting remove caracteres desnecessários para melhorar drasticamente a velocidade de carregamento de um site.

Testar a ferramenta: Conversor e Subsetter de Fontes

Em uma frase

O subsetting e a conversão de fontes é como arrumar as malas para o fim de semana: em vez de arrastar uma mala com 6.000 caracteres cheia de alfabetos cirílicos e dingbats que você nunca vai usar, você coloca na mochila só as letras exatas que precisa, altamente compactadas e prontas pra web.

O problema que isso resolve

Se você criava sites em 2005, sua paleta tipográfica era basicamente uma situação de refém. Você tinha Arial, Times New Roman, Georgia, Verdana, e talvez Comic Sans se quisesse ver o circo pegar fogo. Essas eram as fontes "web-safe" — o que significava cruzar os dedos e rezar pra que elas já estivessem instaladas no sistema operacional do usuário.

Aí veio a revolução do @font-face. De repente, os designers podiam embutir qualquer typeface customizada que quisessem. A web ficou linda, mas também ficou incrivelmente lenta.

Fontes desktop padrão (TrueType ou OpenType) são desenhadas para impressão e suporte universal a idiomas. Um único arquivo .ttf pode conter milhares de glyphs, suportando inglês, grego, vietnamita, símbolos matemáticos super específicos e umas vinte variações do ampersand (&). Isso é fantástico para um processador de texto, mas catastrófico para um browser em uma conexão 3G sofrida. Fazer o download de um arquivo de fonte de 400KB bloqueia a renderização, causando o temido "Flash of Unstyled Text" (FOUT) ou, pior, o "Flash of Invisible Text" (FOIT).

Precisávamos de duas coisas pra curar essa obesidade tipográfica:

  1. Melhor compressão feita especificamente para a web (daí os formatos como WOFF e WOFF2).
  2. Subsetting, a remoção cirúrgica de cada caractere e tabela de idioma que um site específico não vai realmente usar.

Como funciona por baixo dos panos

Pra entender como a gente encolhe as fontes, você precisa entender o que um arquivo de fonte realmente é. Uma fonte moderna (tipo TTF ou OTF) não é só uma pasta de desenhos vetoriais. Ela é um banco de dados binário e complexo, baseado no formato de container SFNT.

A anatomia de uma fonte

Dentro de um container SFNT, os dados são organizados em tabelas específicas:

  • glyf ou CFF: Os desenhos vetoriais em si (as curvas e linhas das letras).
  • cmap: O mapa de caracteres, que traduz um ponto Unicode (tipo U+0041 pro 'A') para o desenho específico lá na tabela glyf.
  • GSUB / GPOS: Features avançadas do OpenType, como ligatures (juntando 'f' e 'i') e kerning (o espaçamento entre pares específicos de letras).
  • name: Metadados, como o nome da fonte, copyright e info do designer.

A mágica do Subsetting

Quando você faz o subsetting de uma fonte, um parser abre esse container SFNT. Você passa pra ele uma lista de caracteres — digamos, apenas o alfabeto latino básico, números e a pontuação comum.

O parser não sai simplesmente apagando os desenhos vetoriais que não estão sendo usados da tabela glyf. Ele precisa reconstruir o banco de dados inteiro meticulosamente. Ele reescreve o cmap pra remover os pontos Unicode abandonados. Ele vasculha as tabelas GSUB e GPOS, arrancando os pares de kerning de letras que não existem mais, garantindo que o arquivo não quebre. Por fim, ele recalcula os offsets de memória pros headers do arquivo.

Uma fonte padrão de 300KB cai fácil pra uns 15KB fazendo um subset apenas dos caracteres latinos básicos.

A Guerra dos Formatos: WOFF e WOFF2

Com o subsetting pronto, chega a hora de compactar a fonte.

Formato Tecnologia de Compressão O Veredito
TTF / OTF Nenhum (Geralmente) Ótimo para apps de design no desktop. Terrível pra entrega na web.
WOFF Zlib O formato Web Open Font original. Bom, mas datado.
WOFF2 Brotli O padrão moderno. Transforma as tabelas da fonte antes de compactá-las.

O WOFF2 é o rei indiscutível das web fonts. Ele não pega só um TTF e joga num zip. O WOFF2 transforma fisicamente as tabelas SFNT — especificamente agrupando tipos de dados semelhantes — para que o algoritmo de compressão Brotli por baixo dos panos consiga encontrar padrões de repetição mais longos. Isso resulta em tamanhos de arquivo até 30% menores que o WOFF1, e possivelmente 95% menores que o TTF original quando combinado com o subsetting.

Amarrando tudo com CSS

Depois de gerar o seu arquivo WOFF2 altamente compactado e com subsetting, você avisa o browser sobre ele usando CSS. A propriedade unicode-range é crucial aqui. Ela diz ao browser: "Só baixe este arquivo se algum caractere na página realmente bater com este intervalo."

@font-face {
  font-family: 'MyCustomFont';
  /* Carrega o formato WOFF2 altamente compactado */
  src: url('mycustomfont-subset.woff2') format('woff2');
  /* Só engatilha o download se a página usar caracteres latinos básicos */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
  font-display: swap;
}

Histórias da vida real

A Catástrofe do "Só um Ampersand"

Uma agência de design chique estava criando a landing page para um restaurante de alto padrão. A tipografia do título tava maravilhosa, principalmente porque usaram uma fonte cursiva linda e toda desenhada exclusivamente para o ampersand (&) no nome do restaurante: "Salt & Ash".

Porém, as pontuações de performance no Lighthouse estavam vermelhas no talo. Os devs perceberam que estavam forçando os usuários a baixar um arquivo TTF de 250KB só para renderizar um único caractere. Jogando a fonte num subsetter e extraindo apenas o caractere & (Unicode U+0026), eles geraram um arquivo WOFF2 que pesava ridículos 800 bytes. A lição: Nunca carregue uma família inteira de fontes para uma letra capitular decorativa, ícones ou caracteres únicos. Faça subsetting de forma agressiva.

O Megabyte Multilíngue

Uma empresa de SaaS localizou o site de marketing deles para usuários do Japão e da Coreia do Sul. Pra manter o branding consistente, eles embutiram uma fonte CJK (Chinês, Japonês, Coreano) super respeitada. Fontes CJK são notoriamente imensas porque contêm dezenas de milhares de ideogramas. O arquivo tinha 4.5MB.

De repente, os usuários dos EUA e da Europa estavam esperando segundos pra qualquer texto aparecer, porque o browser tava baixando 4.5MB de caracteres asiáticos que eles nunca iam ver na vida. O time de engenharia resolveu isso dividindo a fonte principal através de subsetting em vários "chunks" menores (um WOFF2 pro Latino Básico, um pro Hiragana/Katakana, etc.) e distribuindo isso em blocos de @font-face usando descritores rígidos de unicode-range. Os browsers agora só baixavam o chunk Latino de 15KB pros usuários em inglês. A lição: Use subsetting e unicode-range para servir dinamicamente os chunks tipográficos de acordo com as necessidades reais de idioma do usuário.

Erros comuns e armadilhas

  • Deletar a barra de espaço sem querer: Quando vão digitar os caracteres literais que querem no subset (ex.: abcdefghijklmnopqrstuvwxyz), é super comum os devs esquecerem de incluir o caractere de espaço (U+0020). Sem ele, a sua fonte customizada e cuidadosamente trabalhada vai fazer o fallback pra Arial toda vez que tiver um espaço entre as palavras, criando aquela estética bizarra de carta de sequestrador.
  • Servir formatos legados sem necessidade: Vários desenvolvedores ainda geram e servem fontes EOT, TTF e SVG nas suas stacks CSS "só pra garantir". Não faça isso. O WOFF2 é suportado por mais de 97% dos browsers no mundo todo. Sirva WOFF2, talvez ofereça um WOFF como fallback para browsers muito antigos, e pare por aí.
  • Arrancar features essenciais do OpenType: Ferramentas agressivas de subsetting às vezes oferecem arrancar as tabelas GSUB e GPOS pra economizar alguns kilobytes a mais. Se a sua fonte depende de ligatures complexas (como transformar -> numa seta) ou se apoia forte em kerning pra não ficar horrorosa, arrancar essas tabelas vai arruinar a sua tipografia.
  • Esquecer o font-display: swap: Mesmo um WOFF2 minúsculo de 12KB leva alguns milissegundos pra baixar. Se você não colocar um font-display: swap no seu CSS, os browsers modernos vão esconder o seu texto completamente até a fonte chegar. Dê aos seus usuários um texto do sistema pra eles lerem enquanto a fonte customizada não chega.

Por que isso tem que estar no seu radar

Web fonts são historicamente um dos maiores vilões quando o assunto é destruir os seus Web Vitals. Se você se importa com Largest Contentful Paint (LCP) ou Cumulative Layout Shift (CLS), você tem que se importar com o delivery de fontes.

Você deve pensar em conversão e subsetting de fontes no momento em que recebe um arquivo .ttf ou .otf de um designer ou baixa um de uma foundry. Servir uma fonte desktop crua na web é a mesma coisa que servir um bitmap não-compactado e bruto de 10MB ao invés de um WebP.

Convertendo para WOFF2 e arrancando fora os milhares de glyphs que você não usa, você reduz os custos de banda, diminui a pegada de carbono da sua aplicação, e garante que o seu site esteja realmente legível no exato milissegundo em que o usuário clica no seu link.

Pra ir mais fundo

Teoria feita. Hora de pôr a mão na massa — 100% no seu navegador.

Testar a ferramenta: Conversor e Subsetter de Fontes