Criar pacote de fontes para a web
Selecione fontes TTF, OTF, WOFF ou WOFF2 para criar arquivos WOFF2, CSS e uma prévia em HTML. Antes de integrá-las a um site, confira o texto de exemplo, o nome e o peso e estilo no CSS e a exibição durante o carregamento; em seguida, salve o pacote como ZIP. Não são criados subconjuntos de caracteres.
O que você pode fazer
Reunir arquivos para a web
Crie WOFF2, CSS e uma prévia em HTML a partir de TTF, OTF, WOFF ou WOFF2. Você pode selecionar várias fontes juntas.
Conferir glifos e configurações CSS
Confira a aparência das fontes convertidas. Se necessário, altere os nomes, pesos e estilos usados na web e a forma de exibição durante o carregamento.
Compartilhar o conjunto como ZIP
Salve a pasta fonts, o arquivo fonts.css e o preview.html em conjunto. Use-os preservando seus caminhos relativos.
Como usar
Selecionar fontes em conjunto
Selecione fontes que possam ser usadas na web. Se usar várias fontes, selecione-as juntas.
Conferir a aparência e as configurações para a web
Informe um texto para visualizar e conferir cada fonte. Para ajustar o nome, o peso ou outras opções, abra as configurações CSS dessa fonte.
Criar o pacote e salvar o ZIP
Clique em “Criar pacote de fontes para a web” e salve o webfont-kit.zip gerado.
Extrair e adicionar a uma página da web
Extraia os arquivos preservando os locais da pasta fonts, de fonts.css e de preview.html. Carregue o CSS na página em que usará as fontes e use os nomes indicados.
Útil quando
Preparar um site para publicação
Reúna suas fontes em formatos para a web e CSS para preparar os arquivos necessários à integração.
Entregar o conjunto completo à equipe de produção
Reúna várias fontes, como regular e negrito, e entregue-as com um HTML que contenha texto para conferência.
Como as fontes e o CSS funcionam juntos
WOFF2 é um formato de fonte para a web
Prepare WOFF2 com os caracteres originais. Não são criados subconjuntos de caracteres. O tamanho do arquivo varia de acordo com a fonte.
Registrar nomes, pesos e estilos no CSS
Essas configurações determinam quais estilos solicitados usarão esta fonte na web. Elas não alteram os glifos da fonte para deixá-los em negrito ou itálico.
Diferenciar o mesmo nome por peso e estilo
Os estilos regular e negrito podem usar o mesmo nome, mas a combinação de nome, peso e estilo não pode se repetir.
Escolher a exibição durante o carregamento
Por padrão, uma fonte alternativa é exibida primeiro e é substituída quando a fonte fica pronta. Se necessário, você pode alterar nas configurações CSS o comportamento de espera e substituição.
Preservar os caminhos relativos dos arquivos
fonts.css referencia arquivos como fonts/font-1.woff2. Se você mover a pasta ou o CSS, ajuste os caminhos referenciados de acordo.
Perguntas frequentes
Onde devo colocar os arquivos gerados?
Extraia o ZIP e posicione a pasta fonts, o arquivo fonts.css e o preview.html de modo a preservar os caminhos relativos entre eles. Carregue fonts.css na sua página e use no CSS o nome de fonte indicado.
Qual é a diferença em relação à conversão de formato apenas?
Esta tela reúne WOFF2, CSS e uma prévia em HTML. Se quiser apenas alterar o formato da fonte, use “Conversor de formato de fonte”.
Posso manter somente os caracteres que uso?
Esta tela não cria subconjuntos de caracteres. Ela prepara fontes que mantêm os caracteres originais.
Alterar o peso deixa os caracteres mais grossos?
A configuração especifica o valor de peso usado no CSS. Ela não modifica os glifos do arquivo de fonte. Para usar negrito ou itálico, forneça um arquivo que contenha esses glifos.
Posso usar vários arquivos com o mesmo nome de fonte?
Você pode registrar arquivos com pesos ou estilos diferentes. Se houver duplicação da mesma combinação de nome, peso e estilo, revise as configurações correspondentes.
O que acontece quando seleciono fontes novamente?
O conjunto atual de fontes e o ZIP gerado são removidos, e o novo conjunto selecionado é carregado. Se quiser continuar usando alguns arquivos junto com os novos, selecione-os novamente também.
E se nem todos os caracteres de exemplo forem exibidos?
Os caracteres que não estão incluídos na fonte podem ser exibidos usando outra fonte. Confira os caracteres compatíveis e como aparecem no local em que a fonte será usada.
E se não for possível carregar uma fonte?
Selecione novamente fontes em um formato compatível. Se algum arquivo do conjunto não puder ser convertido ou carregado, o conjunto parcialmente concluído não será salvo.
Entrada e resultados
- Entrada
- TTF, OTF, WOFF e WOFF2. Você pode selecionar vários arquivos juntos.
- Condições
- Confira os termos de uso das fontes de entrada, incluindo a incorporação na web.
- Configurações
- Nomes, pesos, estilos e forma de exibição durante o carregamento usados no CSS.
- Saída
- webfont-kit.zip. Inclui WOFF2, fonts.css e preview.html.