EspañolGerador de @font-face
Escolha os arquivos da fonte. Nada é enviado: o arquivo é lido aqui mesmo para descobrir peso e estilo pelo nome e mostrar a prévia.
Como usarFonte própria no site, do jeito certo
.woff2, .woff, .ttf ou .otf, vários de uma vez
CSS
Escolha os arquivos para gerar o código.
Preload (no <head>, só das fontes da primeira tela)
Disponível em: 
Gerador de @font-face: para que serve
Para usar uma fonte própria no site, sem depender do Google Fonts, é preciso hospedar os arquivos e declarar cada um com @font-face. Errar o peso ou esquecer o font-display deixa o texto invisível enquanto carrega ou com o negrito falso.
Escolha os arquivos e a ferramenta descobre peso e estilo pelo nome (Regular, Bold, SemiBold, Italic, 700, variável), agrupa os formatos da mesma variação, gera as regras com font-display: swap e a tag preload com crossorigin para a fonte da primeira tela, e mostra uma prévia com a fonte de verdade. Os arquivos não saem do seu aparelho.
Como usar
- Escolha os arquivos da fonte.
- Confira o nome da família, os pesos e a pasta.
- Copie o CSS e a tag de preload.
Quando usar
- Usar a fonte da marca no site.
- Hospedar a fonte em vez do Google Fonts.
- Arrumar fonte que aparece com negrito errado.
Perguntas frequentes
Qual formato de fonte usar?
WOFF2. É comprimido e aceito por todos os navegadores atuais, então na maioria dos sites basta ele. TTF e OTF funcionam, mas pesam bem mais; converta para WOFF2 antes de publicar.
Para que serve o font-display: swap?
Mostra o texto na hora com uma fonte do sistema e troca pela sua quando ela termina de baixar. Sem isso, o navegador pode esconder o texto por alguns segundos, o que o PageSpeed aponta como problema.
Devo usar preload em todas as fontes?
Não, só nas usadas logo na primeira tela, normalmente uma ou duas (o texto do corpo e o título). Preload demais disputa a conexão com a imagem principal e pode piorar o carregamento. O preload de fonte precisa do atributo crossorigin, mesmo no próprio domínio.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.