TTF, OTF ou WOFF: qual formato de fonte instalar ou usar na web

TrueType é o mais antigo dos quatro. A Apple o lançou com o System 7 em 1991 e a Microsoft o adotou no Windows 3.1 no ano seguinte. Uma fonte TrueType descreve cada letra com curvas quadráticas, que têm um ponto de controle por segmento curvo e eram baratas de desenhar nos primeiros computadores. Ela também traz hinting: pequenos programas dentro da fonte que ajustam hastes e curvas à grade de pixels, para que o texto fique nítido em telas de baixa resolução. A extensão .ttf ainda identifica fontes com esses contornos quadráticos.

OpenType, anunciado pela Microsoft e pela Adobe em 1996, é um contêiner, não um novo tipo de contorno. Ele pode guardar contornos TrueType ou contornos PostScript armazenados em uma tabela CFF, que usam curvas cúbicas com dois pontos de controle por segmento. Em volta desses contornos, acrescenta tabelas de layout para tipografia avançada: ligaturas padrão e opcionais, versaletes, algarismos antigos, conjuntos estilísticos, alternativas contextuais e kerning. Por convenção, uma fonte OpenType baseada em CFF é salva como .otf, enquanto uma fonte OpenType com contornos TrueType mantém a extensão .ttf.

WOFF e WOFF2 são contêineres criados para a web. O WOFF foi esboçado em 2009 e virou Recomendação do W3C em 2012; ele comprime cada tabela da fonte com zlib. O WOFF2 virou Recomendação do W3C em 2018, passou a usar Brotli e pré-processa os dados dos glifos, o que normalmente o deixa cerca de 30% menor que o WOFF. Três formatos laterais completam o quadro. O EOT era o formato web próprio do Internet Explorer, as fontes SVG foram uma solução provisória do início, exclusiva do Safari, e as fontes variáveis, adicionadas no OpenType 1.8 em 2016, reúnem uma faixa inteira de pesos ou larguras em um só arquivo.

Instale TTF ou OTF e não se preocupe com qual dos dois. O Windows 10 e o 11 instalam ambos com clique direito e Instalar, o macOS abre ambos no Catálogo de Fontes e os desktops Linux os reconhecem em ~/.local/share/fonts assim que o cache de fontes é atualizado. Word, Photoshop, o app de desktop do Figma, Affinity e LibreOffice leem os dois. Se um designer enviar a mesma família nas duas versões, o OTF costuma ser aquele em que o designer da fonte desenhou, e o TTF é uma conversão feita para programas mais antigos.

Os casos em que a diferença importa são poucos. Alguns programas de máquinas de corte e de bordado, engines de jogos e bibliotecas de display para microcontroladores só entendem contornos TrueType, então um OTF baseado em CFF aparece quebrado neles e precisa de conversão de OTF para TTF. No sentido contrário, nada no desktop instala WOFF ou WOFF2 diretamente: esses arquivos são empacotados para navegadores. Instale apenas uma versão de cada família, porque um TTF e um OTF com o mesmo nome interno confundem os menus de fontes e os aplicativos podem escolher a errada.

Todas as versões atuais de Chrome, Edge, Firefox e Safari leem WOFF2, então ele deve ser a primeira e muitas vezes a única fonte na sua regra @font-face. Acrescente uma linha WOFF depois dele apenas se suas métricas ainda mostrarem navegadores anteriores a 2016, como WebViews antigos do Android ou navegadores de TV embutidos. O navegador percorre a lista src em ordem e baixa o primeiro formato que suporta, ou seja, a alternativa não custa nada aos visitantes modernos. Se você já tem o arquivo TrueType do desktop, TTF para WOFF gera essa alternativa de uma só vez.

Evite servir TTF ou OTF brutos em um site, a menos que uma plataforma obrigue, como alguns construtores de e-mail e sistemas de conteúdo antigos. Os navegadores os exibem sem problema, mas os arquivos trafegam sem compressão, a não ser que seu servidor use gzip em fontes, e entregam a qualquer pessoa uma cópia pronta para instalar no computador. A linha font-display: swap abaixo diz ao navegador para mostrar o texto imediatamente em uma fonte substituta e trocar pela sua quando ela chegar, em vez de ocultar o texto por até 3 segundos enquanto espera.

Hospede os arquivos no seu próprio domínio sempre que possível. Chrome, Safari e Firefox agora particionam o cache por site, então uma fonte buscada em uma CDN compartilhada não é mais reaproveitada entre sites, e hospedar por conta própria economiza uma consulta DNS e uma conexão. Use <link rel="preload"> só para um ou dois pesos usados na parte visível da página; pré-carregar todos os estilos disputa banda com as imagens.

Um único peso de texto latino salvo como WOFF2 costuma ter de 20 a 60 KB. A mesma fonte como TTF sem compressão costuma ser duas a três vezes maior, e uma família que também cobre grego, cirílico e vietnamita pode passar de 200 KB por estilo. Fontes chinesas, japonesas e coreanas são outra escala: um peso CJK completo tem dezenas de milhares de glifos e geralmente chega a vários megabytes mesmo após a compressão WOFF2, o que é demais para carregar antes de a página mostrar o texto.

O subsetting remove os caracteres que uma página nunca usa, e o unicode-range diz ao navegador quais caracteres um arquivo cobre, para que ele só baixe esse arquivo quando a página realmente os contiver. O Google Fonts usa exatamente isso para CJK, dividindo cada família em muitas fatias pequenas carregadas sob demanda. Nas suas próprias fontes, a opção Caracteres mantidos do conversor de fontes reduz o arquivo para Latin + accents ou Só os caracteres que eu digitar antes de ele chegar ao seu servidor; mantenha Todos os caracteres para o que você instala no computador.

Converter TTF para OTF e vice-versa é uma troca de contêiner para fontes com contornos TrueType: a tabela de contornos, as métricas e os recursos de layout passam intactos. O caso interessante é um OTF baseado em CFF indo para TTF. Curvas cúbicas não podem ser copiadas para um formato de contorno quadrático, então cada curva é redesenhada como um ou mais segmentos quadráticos com uma tolerância bem menor que um pixel. Os hints PostScript também não podem ser traduzidos, e por isso a ferramenta de OTF para TTF oferece Hinting como Manter, Remover ou Hinting automático.

Voltar da web para o desktop é a conversão mais comum. Você baixa um tema ou um kit de design, encontra apenas arquivos .woff ou .woff2 e precisa da fonte no Word ou no Figma. WOFF para TTF remove a compressão e grava de volta as tabelas originais, então glifos, kerning e recursos saem iguais aos que entraram. O que não dá para recuperar é o que a versão web já tinha descartado, como caracteres removidos por subsetting ou hints retirados para economizar bytes.

A maioria dos problemas de conversão vem de três coisas: hinting, recursos de layout e eixos variáveis. A lista abaixo traz os sintomas que você provavelmente notará depois de converter e a causa habitual de cada um.

Um arquivo de fonte é um pequeno banco de dados, e três partes dele respondem à maioria das perguntas. A tabela name guarda o nome da família, o nome do estilo, a versão, a linha de copyright e, muitas vezes, a URL da licença; o Catálogo de Fontes do macOS a mostra na visualização de informações, e a prévia de fontes do Windows exibe as primeiras linhas. A cobertura de glifos indica quais idiomas a fonte consegue compor: uma fonte só com caracteres latinos recorre em silêncio a outra tipografia para caracteres do polonês, do turco ou do vietnamita que não tem. Em uma fonte variável, a tabela fvar lista os eixos, como peso de 100 a 900 ou largura de 75 a 125.

Vale olhar a licença antes de qualquer coisa ir ao ar. Fundições comerciais costumam vender licenças separadas para desktop, web e aplicativo, e uma licença de desktop geralmente cobre a instalação em um número definido de computadores, mas não o envio do arquivo aos visitantes de um site nem a inclusão em um aplicativo móvel. Converter uma fonte muda o formato do arquivo, nunca a licença, então um WOFF2 feito de um TTF de desktop tem os mesmos termos do TTF. Fontes sob a SIL Open Font License, que abrange a maior parte do Google Fonts, podem ser convertidas, reduzidas por subsetting e hospedadas por conta própria.

A maioria das dúvidas sobre fontes se resume a onde o arquivo vai ficar. Se ele será instalado em um computador ou embutido em um aplicativo, use TrueType ou OpenType; se um navegador vai baixá-lo, use os contêineres web comprimidos. A tabela associa tarefas comuns ao formato a escolher e à conversão que leva até ele, para você pular a história e ir direto ao arquivo de que precisa.

Duas tarefas ficam entre as categorias. O EPUB 3 aceita TTF, OTF e WOFF, então e-books podem usar qualquer uma das famílias de formatos, e os arquivos de fonte SVG pertencem à mesma linhagem dos gráficos vetoriais, mas hoje importam principalmente para alguns softwares de plotter e gravação, não para navegadores.