Converter TTF para WOFF2
Hospedar uma fonte no seu próprio site começa aqui: WOFF2 é o formato que todo navegador atual baixa primeiro e o invólucro mais leve para os dados TrueType que você já tem. Esta página também gera a regra CSS que carrega a fonte.
Conversor de fontes
ou solte arquivos TTF, OTF, WOFF … aqui ·
Até 95 MB por arquivo· Até 20 arquivos· Apagados após 30 minutos
Os arquivos são processados em nossos servidores e apagados após 30 minutos.
Remover alfabetos que você não usa pode reduzir uma fonte web de centenas de KB para menos de 30 KB. Mantenha todos os caracteres nas fontes que você instala no computador.
Cole o texto ou os caracteres que a fonte precisa cobrir, por exemplo a palavra de um logotipo ou um título. Todo o resto é removido.
O hinting deixa textos pequenos mais nítidos em telas do Windows. Removê-lo costuma economizar 10–30% em fontes web; o hinting automático adiciona hints a fontes que não têm.
Deixe vazio para manter o original. Renomear permite instalar a fonte convertida ao lado da original sem conflito.
Por exemplo, Regular, Bold, Italic. Deixe vazio para manter o nome de estilo original.
Como usar esta ferramenta
- 1
Envie os arquivos TTF
Adicione todos os pesos e estilos que pretende usar, até 20 arquivos de até 95 MB cada. TTFs variáveis também funcionam e mantêm seus eixos.
- 2
Mantenha o CSS ativado e use um subconjunto se puder
Incluir CSS @font-face já vem marcado. Em Configurações avançadas, defina Caracteres mantidos como Latim básico ou Latim + acentos se o seu site for em um idioma ocidental, e considere configurar Hinting como Remover.
- 3
Converta para WOFF2
Clique em Converter para WOFF2 e baixe as fontes junto com o arquivo .css. Envie os dois para o seu site e vincule a folha de estilo ou cole a regra na sua própria.
Como converter TTF para WOFF2 para o meu site?
Envie o .ttf, deixe Incluir CSS @font-face marcado e clique em Converter para WOFF2. Você recebe o arquivo .woff2 e um arquivo .css com uma regra @font-face apontando para ele.
Por que o WOFF2 é o formato de fonte web a usar
Um TTF é composto de tabelas de dados sem compressão: contornos, métricas, kerning, nomes. O WOFF2, publicado como Recomendação do W3C em 2018, mantém exatamente essas tabelas, mas as passa pelo Brotli, o algoritmo de compressão que o Google lançou em 2015, depois de reorganizar os contornos dos glifos para que comprimam melhor. Os testes do próprio Google indicaram que o WOFF2 é em média cerca de 30% menor que o formato WOFF mais antigo, e o navegador restaura os dados originais da fonte após o download, então nada muda no desenho das letras.
As fontes bloqueiam a renderização, o que faz o tamanho delas importar mais do que os kilobytes sugerem. Até a fonte web chegar, o navegador esconde o texto ou mostra uma fonte reserva, e uma troca tardia pode deslocar o layout. Arquivos menores reduzem essa janela, e duas opções aqui reduzem ainda mais: Caracteres mantidos remove glifos que as suas páginas nunca mostram, e Hinting definido como Remover elimina instruções que celulares e telas de alta densidade ignoram de qualquer forma. Guarde os TTFs originais para uso no desktop; WOFF2 para TTF pode descompactar uma fonte web depois, mas não consegue restaurar glifos que um subconjunto removeu.
Tamanho do arquivo: TTF vs. WOFF2
TTF, conjunto completo de caracteres
100%
Tabelas de fonte sem compressão, como instaladas em um desktop
WOFF2, subconjunto Latim básico
frequentemente 10–25%
Compressão Brotli e menos glifos; varia conforme a fonte
A regra @font-face para uma fonte WOFF2
@font-face {
font-family: "Brand Sans";
src: url("/fonts/brand-sans-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF;
}Suporte ao WOFF2 nos navegadores, versão por versão
2014
Chrome 36
O navegador do Google é o primeiro a decodificar WOFF2 por padrão.
2015
Firefox 39
A Mozilla ativa a decodificação de WOFF2 por padrão.
2016
Edge 14
O Edge original da Microsoft passa a suportar WOFF2 com a Atualização de Aniversário do Windows 10.
2018
Recomendação do W3C
A especificação é finalizada; nessa época o Safari no macOS e no iOS também decodifica WOFF2.
TTF
Fonte TrueType
TTF é o formato de fonte TrueType, desenvolvido pela Apple no fim dos anos 1980, lançado em 1991 e depois licenciado para a Microsoft. Ele define os contornos dos glifos com curvas quadráticas e inclui instruções de hinting que deixam o texto nítido na tela. O TrueType é suportado por todos os sistemas operacionais de desktop, processadores de texto e aplicativos de design. Faltam a ele alguns recursos tipográficos avançados do OpenType, e ele é maior que os formatos de fonte para a web.
- Compressão
- Sem perdas
- Transparência
- –
- Animação
- –
- Lançamento
- 1991 · Apple
WOFF2
Web Open Font Format 2 (WOFF2)
WOFF2 é a segunda versão do Web Open Font Format, baseada na compressão Brotli do Google e publicada como Recomendação do W3C em 2018. Os arquivos são cerca de 30% menores que os WOFF, o que ajuda as páginas a carregar mais rápido. Todos os navegadores modernos suportam WOFF2, e ele é o formato recomendado para fontes web. Sistemas operacionais de desktop e aplicativos de design não o instalam diretamente.
- Compressão
- Sem perdas
- Transparência
- –
- Animação
- –
- Lançamento
- 2018 · W3C (Google)
TTF para WOFF2 empacota uma fonte de desktop no contêiner comprimido com Brotli que os navegadores preferem, de modo que os mesmos glifos chegam aos visitantes em menos bytes; a página inversa existe para quem precisa instalar uma fonte encontrada na web.
Perguntas frequentes sobre converter TTF para WOFF2
Ainda preciso de um TTF ou WOFF de reserva junto com o WOFF2?
Para sites públicos hoje, normalmente não. Chrome, Edge, Firefox e Safari leem WOFF2 há anos, e os poucos navegadores que não leem, como o Internet Explorer 11, raramente justificam um arquivo extra. Adicione a saída de TTF para WOFF como segunda entrada de src apenas se as suas métricas mostrarem esses visitantes.
Por que minha fonte WOFF2 ainda passa de 100 KB?
A compressão só reduz a forma como os glifos são armazenados, não a quantidade deles. Uma fonte que cobre latim, cirílico, grego e vietnamita leva todos esses conjuntos. Fazer um subconjunto com os alfabetos que você realmente exibe é o que leva uma fonte de texto para algumas dezenas de kilobytes.
O que faz o font-display: swap?
Ela diz ao navegador para exibir o texto imediatamente em uma fonte reserva e trocar pela sua fonte web quando ela chegar, em vez de esconder o texto durante o download. Adicione-a à regra @font-face como no exemplo acima, ou use optional se preferir evitar uma troca tardia em conexões lentas.
Posso converter um TTF do Google Fonts para WOFF2 e hospedá-lo eu mesmo?
Sim. As famílias do Google Fonts são publicadas sob a SIL Open Font License ou a Apache License, e ambas permitem a conversão e a hospedagem própria. Hospedar o arquivo você mesmo também evita uma requisição a um servidor de terceiros.
O WOFF2 funciona em newsletters por e-mail?
Só em alguns clientes. O Apple Mail e o Mail do iOS carregam fontes web por @font-face, enquanto o Gmail e a maioria das versões do Outlook as ignoram e mostram a fonte reserva. Sempre inclua uma fonte de sistema segura na lista de fontes de um e-mail.