Morph Blog
Fontes

TTF para WOFF2, em detalhe.

Por que o WOFF2 é 30% menor, como melhora os Core Web Vitals e como converter sem violar termos de licença de fonte — feito no seu navegador, em segundos.

PELO MORPH3 MIN LEITURAATUALIZADO ABRIL DE 2026

Se você estiver servindo fontes TTF em seu site, está enviando aproximadamente 30% mais dados do que necessário. O WOFF2 entrega a mesma tipografia em um arquivo significativamente menor, e todos os navegadores modernos o suportam. Aqui está como converter — e por que isso importa para o desempenho do seu site.

Por que WOFF2?

WOFF2 (Web Open Font Format 2.0) usa compressão Brotli para reduzir arquivos de fonte em aproximadamente 30% em comparação com TTF, sem perda de qualidade. Os glifos da fonte, hinting, kerning e todos os recursos tipográficos são preservados idênticos. Quando um navegador carrega um arquivo WOFF2, ele o descomprime para os mesmos dados do TTF original.

O impacto no desempenho é real. Fontes são recursos que bloqueiam o renderizado — o navegador não exibirá texto até que as fontes terminem de carregar. Um TTF de 120KB que se torna um WOFF2 de 84KB significa que o texto aparece mais rápido, especialmente em conexões móveis. Os Core Web Vitals do Google medem diretamente isso: fontes menores melhoram o Largest Contentful Paint (LCP) e reduzem o Cumulative Layout Shift (CLS) causado por trocas de fonte.

O suporte do navegador é universal. Chrome, Firefox, Safari e Edge suportam WOFF2. Os únicos navegadores que não suportam são o Internet Explorer e navegadores Android muito antigos — ambos com menos de 1% do tráfego global.

Como converter

Passo 1 Abra morph.cool/ttftowoff2 no seu navegador.
Passo 2 Solte seu arquivo de fonte .ttf na página.
Passo 3 O Morph comprime-o usando wawoff2 (uma versão WebAssembly da codificação WOFF2 do Google com compressão Brotli).
Passo 4 Seu arquivo .woff2 é baixado automaticamente. Adicione-o ao seu projeto e atualize sua regra CSS @font-face.

Usando WOFF2 no CSS

Depois de ter seu arquivo WOFF2, referencie-o em sua folha de estilo. Liste o WOFF2 primeiro com um fallback TTF para máxima compatibilidade:

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2'),
     url('/fonts/myfont.ttf') format('truetype');
  font-display: swap;
}

A diretiva font-display: swap informa ao navegador para mostrar texto de fallback imediatamente e substituir pela fonte personalizada assim que carregar, eliminando texto invisível durante o carregamento da fonte.

Conformidade com licenças de fontes

Muitas licenças comerciais de fontes incluem cláusulas que restringem o upload de arquivos de fonte para serviços da web de terceiros. Isso cria um problema: você precisa converter para WOFF2 para desempenho, mas a maioria das ferramentas de conversão requer o upload da fonte para um servidor.

Morph converte fontes inteiramente no seu navegador usando WebAssembly. O arquivo de fonte nunca deixa seu dispositivo — é processado localmente e salvo diretamente na pasta de downloads. Nenhum upload significa que não há distribuição para terceiros.

Claro, sempre verifique os termos específicos da licença da sua fonte. Mas a natureza local-only da conversão do Morph elimina a preocupação de conformidade mais comum.

Outras conversões de fonte

Morph também suporta OTF para WOFF2, WOFF para WOFF2, TTF para OTF e todas as outras combinações de TTF, OTF, WOFF e WOFF2. Precisa de fontes gratuitas para começar? Navegue pelas 1.500+ fontes gratuitas na biblioteca de fontes do Morph.

Converter TTF para WOFF2 — Gratuito