Português ▾
Free, Fast & Secure Online Tools
WOFF significa Web Open Font Format, e a primeira coisa a entender é que não é um tipo novo de fonte. É um invólucro: uma fonte TrueType ou OpenType existente, comprimida, com alguns metadados, empacotada para o navegador baixar rápido.
As formas das letras lá dentro não mudam. O que muda é a eficiência com que elas viajam.
O conselho prático é incomumente simples: sirva apenas WOFF2. Os fallbacks antigos que os guias recomendavam — WOFF, TTF, EOT, fontes SVG — hoje são peso morto que o navegador de cada visitante ignora.
TTF e OTF funcionam em navegadores, mas carregam bagagem de desktop que a web não precisa e são bem maiores. Pertencem ao seu computador, não a uma página.
Aqui as fontes web deixam de ser um problema resolvido, e vale dizer em números.
Uma fonte latina cobre talvez 200 a 400 caracteres. Como WOFF2 isso costuma ser 20 a 50 KB. Trivial.
Uma fonte chinesa precisa cobrir milhares de caracteres. Uma que suporte chinês tradicional ou simplificado comum tem de 6.000 a 20.000 glifos, e como WOFF2 isso costuma ser 3 a 15 MB — para um único peso. Japonês e coreano são comparáveis.
É cem vezes o tamanho, e não é um problema de compressão que alguém possa resolver: a fonte realmente contém essa quantidade de desenhos distintos. Entregá-la como fonte web normal significa que o visitante baixa vários megabytes antes de o texto aparecer direito, o que é inaceitável numa conexão móvel.
Existem três abordagens reais:
Subconjunto. Montar um arquivo de fonte contendo só os caracteres que a página realmente usa. Para uma página fixa — uma landing, uma capa, um conjunto de títulos — funciona lindamente e pode levar 10 MB a 30 KB. Falha com conteúdo variável, porque um caractere fora do subconjunto cai em outra fonte e fica visivelmente errado.
Divisão por unicode-range. A fonte é cortada em muitos arquivos pequenos por faixa de caracteres, e o navegador baixa só os pedaços com caracteres presentes na página. É assim que funcionam os grandes serviços de fontes CJK, e é a única abordagem que lida com conteúdo arbitrário. Ainda assim são dezenas de requisições e algumas centenas de kilobytes.
Fontes do sistema. Usar as fontes que já estão no aparelho do leitor. Nada é baixado, o texto aparece na hora, e a tipografia é a que aquele aparelho tiver. Para texto corrido em chinês essa costuma ser a escolha honesta — o custo de desempenho de uma fonte CJK própria é real e o ganho visual num celular é pequeno.
Um meio-termo comum: fonte própria em subconjunto para títulos, onde o repertório é pequeno e conhecido, e fontes do sistema para o corpo.
Você escolhe com font-display na folha de estilo. swap dá FOUT e é o padrão certo para texto corrido — legível já vence bonito depois. optional vai além: o navegador usa a fonte própria só se ela chegar quase instantaneamente, e senão mantém a alternativa naquela visita, eliminando o salto.
O salto em si diminui escolhendo uma alternativa com proporções parecidas, para menos texto refluir na troca.
Uma família tradicional entrega um arquivo por peso e estilo. Seis arquivos, seis downloads.
Uma fonte variável põe toda a faixa num arquivo, com o peso como eixo contínuo. É maior que um peso isolado mas bem menor que todos juntos, então a partir de três pesos ela vence. Algumas expõem ainda largura, inclinação ou tamanho óptico como eixos.
Uma licença de fonte para desktop normalmente não permite incorporação na web. A fonte que você comprou, ou que veio com o software de design, é licenciada para criar documentos na sua máquina — não para ser servida a cada visitante de um site. Uso web é outra licença, muitas vezes cobrada por visualizações de página.
Converter um TTF de desktop para WOFF2 e subir é tecnicamente trivial e, na maioria dos casos, uma violação de licença. Existem muitas famílias de código aberto cobrindo quase toda necessidade, incluindo várias boas famílias CJK; essa é a resposta direta.
A mesma distinção vale para embutir fontes num EPUB publicado, que também é distribuição e não uso pessoal.
Problema de fonte num PDF parece semelhante mas tem outra causa. Um PDF embute suas fontes dentro do documento, então é autossuficiente; quando as fontes de um PDF mudam, é porque não foram embutidas e o leitor substituiu algo.
Uma fonte web nunca está embutida na página — é um arquivo separado buscado pela rede, e pode não chegar por razões que um PDF nunca enfrenta: uma requisição bloqueada, uma conexão lenta, uma folha de estilo que nomeia um arquivo que não existe.
font-display: swap mostra texto legível já, em vez de espaço em branco