Fontello
Gerador de fontes de ícones
Grátis
Plataformas suportadas
web
Tags de ferramenta
O que é Fontello
O Fontello é um utilitário web de alta performance que permite aos desenvolvedores criar fontes de ícones personalizadas a partir de arquivos vetoriais SVG. Diferente de bibliotecas monolíticas como o Font Awesome, o Fontello permite selecionar ícones específicos de vários conjuntos ou enviar seus próprios SVGs, reduzindo significativamente o tamanho do bundle. Ele gera automaticamente arquivos CSS, WOFF, EOT e TTF, garantindo compatibilidade entre navegadores. Ao remover glifos não utilizados, otimiza a performance web e minimiza requisições HTTP, sendo essencial para engenheiros front-end focados em arquitetura de UI leve e performática.
Principais recursos do Fontello
Seleção de subconjunto de ícones
O Fontello permite selecionar apenas os glifos necessários para sua aplicação. Ao excluir milhares de ícones não utilizados, você reduz o tamanho do arquivo de fonte de centenas de kilobytes para apenas alguns. Esse controle granular melhora diretamente os Core Web Vitals, reduzindo especificamente os tempos de Largest Contentful Paint (LCP) ao minimizar o tamanho da carga de ativos críticos.
Conversão de SVG para fonte
A plataforma inclui um motor robusto que converte caminhos vetoriais SVG em formatos de fonte padronizados (WOFF, WOFF2, TTF, EOT). Ele gerencia a normalização de caminhos e o escalonamento de coordenadas automaticamente, garantindo que seus ícones personalizados sejam renderizados com nitidez em qualquer resolução. Isso é superior ao uso de SVGs brutos no DOM, pois permite fácil manipulação de cor e tamanho via propriedades CSS padrão como 'color' e 'font-size'.
Geração automática de CSS
Após o download, o Fontello fornece um arquivo CSS pronto para uso que inclui todas as declarações @font-face e definições de classe necessárias. Isso elimina o trabalho manual de escrever CSS boilerplate para posicionamento de ícones, ajustes de line-height e alinhamento vertical. O código gerado é otimizado para navegadores modernos, garantindo renderização consistente no Chrome, Firefox, Safari e Edge sem a necessidade de polyfills complexos.
Controle de mapeamento Unicode
Os usuários têm controle total sobre o mapeamento Unicode para cada ícone. Isso é crítico para desenvolvedores que integram ícones em sistemas legados ou sistemas de design complexos onde códigos de caracteres específicos já podem estar reservados. Ao atribuir códigos manualmente, você evita colisões de caracteres e garante que sua fonte de ícones se integre perfeitamente às pilhas tipográficas existentes sem comportamento inesperado.
Compatibilidade multiplataforma
O Fontello gera múltiplos formatos de fonte simultaneamente para garantir a máxima compatibilidade com navegadores. Embora o WOFF2 seja preferido para navegadores modernos devido à sua compressão superior, o Fontello inclui formatos mais antigos como EOT e TTF para suportar ambientes legados. Isso garante que sua UI permaneça consistente em uma ampla gama de dispositivos, desde smartphones modernos até navegadores de desktop antigos, sem exigir ferramentas de conversão adicionais em tempo de build.
Como usar o Fontello
Acesse fontello.com e navegue pelas coleções de ícones integradas ou arraste seus próprios arquivos SVG para a aba 'Custom Icons'.,Selecione os ícones necessários para seu projeto clicando neles; os ícones selecionados serão destacados em vermelho.,Vá para a aba 'Customize Names' para renomear seus ícones, o que definirá os nomes das classes CSS usadas em sua folha de estilo.,Vá para a aba 'Customize Codes' para mapear seus ícones para caracteres Unicode específicos, caso precise evitar conflitos com conjuntos de caracteres existentes.,Clique no botão vermelho 'Download webfont' no canto superior direito para receber um arquivo ZIP contendo as fontes e o CSS gerados.,Extraia os arquivos para o diretório do seu projeto e vincule o arquivo CSS gerado ao seu HTML para começar a usar os ícones via nomes de classe.
Casos de uso do Fontello
Otimização de performance web
Desenvolvedores front-end usam o Fontello para substituir bibliotecas de ícones pesadas. Ao criar uma fonte personalizada contendo apenas os 20-30 ícones realmente usados em uma aplicação web, eles reduzem o tamanho total dos ativos em até 90%, levando a carregamentos de página mais rápidos e melhores rankings de SEO.
Branding com ícones personalizados
Designers e desenvolvedores colaboram para converter logotipos de marca proprietários e elementos de UI exclusivos em uma única fonte de ícones coesa. Isso permite que os ativos da marca sejam estilizados usando CSS, possibilitando mudanças dinâmicas de cor no hover ou em mudanças de estado.
Prototipagem rápida
Designers de UI/UX usam o Fontello para montar rapidamente um conjunto de ícones a partir de várias coleções open-source (como Entypo ou Iconic) para testar conceitos de interface. Ele fornece uma maneira unificada de gerenciar estilos de ícones díspares dentro de um único projeto.
Quem se beneficia do Fontello
Desenvolvedores Front-End
Precisam gerenciar ativos de ícones de forma eficiente enquanto mantêm os tamanhos dos bundles pequenos. O Fontello resolve o problema de bibliotecas de ícones 'inchadas' fornecendo um arquivo de fonte simplificado e personalizado.
Designers de UI/UX
Requerem uma maneira de implementar ícones vetoriais personalizados em projetos web sem depender de desenvolvedores para exportar e otimizar manualmente arquivos SVG individuais para cada tamanho de tela.
Engenheiros de Performance
Focados em reduzir requisições HTTP e tamanhos de carga de ativos. Eles usam o Fontello para consolidar múltiplos ícones em um único arquivo de fonte, reduzindo o número de requisições de rede necessárias para renderizar a UI.
Preços do Fontello
O Fontello é um projeto open-source gratuito. O software é fornecido sob a licença MIT, permitindo o uso gratuito tanto em projetos pessoais quanto comerciais.
