devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Auditoria do site

Gerador de Webfont — TTF e OTF para WOFF2 com CSS

Transforme fontes de desktop em webfonts rápidas: converta para WOFF2 e WOFF, mantenha só os caracteres que você precisa e baixe tudo com o CSS @font-face pronto. Suas fontes nunca são enviadas.

Atualizado em
Confira a licença primeiro. As fontes são protegidas por licenças, e muitas não permitem uso na web ou conversão, mesmo que você tenha comprado. O devpack não verifica licenças e não se responsabiliza pelo uso das suas fontes.
Arraste os arquivos de fonte para cá ou clique para escolher
TTF, OTF, WOFF ou WOFF2 · Adicione uma família inteira · Processado no seu navegador, nada é enviado
Adicione seus arquivos acima. Resultados, prévias e downloads aparecerão aqui.

Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

Como usar: Gerador de Webfont

  1. Arraste um ou mais arquivos TTF ou OTF para a caixa. Adicione todos os pesos de uma família juntos.
  2. Confira a nota de licença de cada fonte. Escolha os formatos de saída e, se quiser, os caracteres que devem ser mantidos.
  3. Confirme que você tem o direito de converter a fonte e clique em Gerar webfonts.
  4. Compare os tamanhos, teste a prévia e clique em Baixar ZIP. Envie a pasta fonts e adicione o CSS ao seu site.

Confira a licença da fonte antes

Fontes são softwares, e as licenças definem o que você pode fazer com elas. Muitas licenças comerciais valem só para uso em desktop ou cobram à parte pelo uso na web, e algumas proíbem converter o arquivo. Isso pode valer mesmo se você comprou a fonte. Licenças abertas, como a SIL Open Font License, normalmente permitem uso na web, mas têm condições próprias. Leia a sua licença antes de converter. O devpack não verifica licenças, e você é o único responsável pelo uso das fontes e pelos arquivos que criar.

Qual formato de fonte devo usar?

WOFF2 é a escolha certa para quase todos os sites. Tem a melhor compressão e funciona em todos os navegadores modernos. Adicione o WOFF só se precisar dar suporte a navegadores bem antigos. TTF e OTF são formatos de desktop e costumam ser bem maiores.

O que é subsetting de fonte?

Uma fonte pode ter milhares de caracteres que o seu site nunca exibe. O subsetting remove esses caracteres, o que pode reduzir muito o tamanho do arquivo e deixar as páginas mais rápidas. Quando você escolhe conjuntos de caracteres, o CSS também recebe um unicode-range, e assim o navegador só baixa a fonte quando uma página precisa dela. Mantenha todos os idiomas que o seu site usa, porque caracteres removidos passam a usar outra fonte.

O que vem no ZIP?

  • Uma pasta fonts com os arquivos convertidos.
  • stylesheet.css com uma regra @font-face por fonte, incluindo peso e estilo.
  • demo.html, uma página que mostra cada fonte funcionando.
  • FONT-INFO.txt, com os dados de copyright e licença que cada fonte informa.

Opções avançadas

  • Fontes variáveis: reduza um eixo, remova-o ou crie pesos estáticos como 400 e 700. O CSS recebe o intervalo de peso correto.
  • Recursos OpenType: mantenha o conjunto padrão, mantenha todos ou marque exatamente os que quiser.
  • Métricas verticais: iguale a altura da linha entre plataformas ou defina seus próprios valores.
  • Fallback compatível: adiciona uma fonte do sistema redimensionada para que o texto se mova menos quando a sua webfont carregar, o que ajuda na pontuação de deslocamento de layout.
  • Código: gere regras @font-face, um exemplo de uso, tags de preload ou a configuração de Tailwind CSS.

Qual é o melhor valor de font-display?

swap mostra o texto em uma fonte de fallback logo de cara e troca pela sua fonte quando ela carrega. optional evita essa troca e o deslocamento de layout, mas em uma conexão lenta a sua fonte pode nunca aparecer. Para acelerar ainda mais, faça preload da fonte principal com uma tag link rel="preload" e teste a página com o Teste de Velocidade de Página.

Usando webfonts no Webflow

Baixe os arquivos WOFF2 e envie-os em Configurações do site → Fontes → Fontes personalizadas. O Webflow cria o CSS para você. Precisa de código personalizado no seu projeto? A ferramenta HTML e CSS para Webflow pode ajudar.

Também pesquisado como: gerar webfont online, alternativa ao font squirrel, gerador font-face css, ttf para woff2, otf para woff2, subset de fonte, converter fonte para webfont, gerador css font-face.

Ferramentas que combinam com: Gerador de Webfont

  • Compressor de Imagem — Reduza fotos e gráficos em até 90% sem perda visível de qualidade, dependendo da imagem e das configurações.
  • Minificador CSS — Cole uma folha de estilos para reduzi-la na hora.
  • Estilos de Botão CSS — Escolha entre 24 botões CSS animados: preenchimentos, bordas, brilhos, reflexos e efeitos 3D de clique.
  • Gerador de Animação CSS — Crie animações CSS em uma linha do tempo de keyframes real.

Perguntas frequentes

Posso converter qualquer fonte?
Não. Depende da licença da fonte, e muitas fontes comerciais não permitem isso. Você precisa ser dono da fonte ou ter uma licença que autorize a conversão e o uso na web. O devpack não verifica isso para você, e você é o único responsável pelo uso.
O que acontece se a fonte estiver marcada como restrita?
As configurações da própria fonte indicam que o dono não permite incorporá-la. Você só pode continuar confirmando que tem a permissão do dono.
O devpack verifica se a minha fonte tem licença?
Não. A ferramenta só mostra o que o próprio arquivo da fonte informa sobre si mesmo, e essas informações podem estar incompletas ou erradas. Sempre confira a sua licença real.
As minhas fontes são enviadas para algum lugar?
Não. Tudo roda no seu navegador, então os arquivos das fontes ficam no seu dispositivo.
Isto é uma alternativa ao Font Squirrel?
Faz um trabalho parecido, com uma diferença grande: a sua fonte é convertida no navegador e não é enviada para um servidor. A ferramenta também lida com fontes variáveis, fallbacks compatíveis e Tailwind CSS.
Ainda devo usar WOFF?
Raramente. O WOFF2 funciona em todos os navegadores modernos, então a maioria dos sites só precisa desse formato.
Por que alguns caracteres sumiram depois da conversão?
Eles foram removidos pela sua seleção de caracteres, ou a fonte nunca os teve. Escolha Manter todos, ou adicione os caracteres que faltam e gere de novo.
Por que não há saída em EOT ou SVG?
Esses formatos só eram necessários para navegadores muito antigos. Os navegadores modernos usam WOFF2.
Posso instalar o Gerador de Webfont como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Webfont é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.

Ferramentas relacionadas

localCompressor de ImagemReduza fotos e gráficos em até 90% sem perda visível de qualidade, dependendo da imagem e das…localMinificador CSSCole uma folha de estilos para reduzi-la na hora. Você verá o tamanho original e o minificado, a…localHTML e CSS para WebflowCole o HTML e o CSS, clique em Copy to Webflow e cole no Designer — você recebe Div Blocks, Headings,…localEstilos de Botão CSSEscolha entre 24 botões CSS animados: preenchimentos, bordas, brilhos, reflexos e efeitos 3D de clique.…apiTeste de Velocidade de PáginaRode o Google Lighthouse em qualquer URL para mobile ou desktop. Veja as notas de desempenho,…localGerador de Animação CSSCrie animações CSS em uma linha do tempo de keyframes real. Comece com mais de 50 presets, navegue quadro…