🚀 Como reduzir o Font Awesome para 10 KB e acelerar o seu site
Ícones tornam os websites intuitivos. Navegação, redes sociais, botões de ação: em todo o lado precisa de pequenas pistas visuais que os visitantes reconheçam instantaneamente. O Font Awesome resolve este problema há 14 anos com uma biblioteca de mais de 2000 ícones gratuitos que se ligam com uma única linha. O problema é que essa única linha traz consigo centenas de kilobytes.
O pacote completo Font Awesome 7 Free pesa cerca de 150 KB por estilo apenas para os ficheiros webfont, sem o CSS. Adicione o CSS (outros ~100 KB minificados) e cada primeiro carregamento de página entrega mais de 250 KB ao utilizador. Pior: se usar 8 a 10 ícones de dois mil, o navegador continua a descarregar tudo. Em 4G móvel, isso significa 2 a 3 segundos extra de espera. O Google PageSpeed penaliza esses payloads com uma redução direta da pontuação.
Mas o problema tem solução. Vamos mostrar-lhe como extrair da biblioteca apenas os ícones realmente usados no seu site e obter um tamanho final de 10 a 15 KB sem perder funcionalidade. Todos os métodos são abordados: do automático ao manual, de ferramentas online a utilitários CLI. Nada de magia, apenas técnicas que funcionam.
💡 Visão geral rápida:
- Analise o seu site e compile uma lista dos ícones Font Awesome realmente em uso
- Escolha o método de otimização para a sua situação: a ferramenta online FontCut, o utilitário CLI fa-subset ou o mecanismo oficial de Kit
- Para controlo máximo, siga a via manual através do FontForge ou IcoMoon: exige esforço, mas dá-lhe controlo total sobre o ficheiro final
- Gere o webfont e o CSS reduzidos, substitua a versão completa no seu servidor por eles
- Meça a velocidade antes e depois: a melhoria típica da Pontuação PageSpeed é de 20 a 40 pontos
Porquê reduzir o Font Awesome?
A principal razão é a velocidade de carregamento. Um estudo da Google mostra que 53% dos visitantes móveis abandonam uma página se esta demorar mais de 3 segundos a carregar. Cada 100 KB extra no caminho crítico de renderização aumenta o tempo até ao First Contentful Paint.
O Font Awesome Free 7 contém três estilos: Solid, Regular e Brands. Combinados, são mais de 2000 ícones e cerca de 450 KB de ficheiros webfont comprimidos. Uma landing page ou blog típico usa 10 a 20 ícones, menos de 1% da biblioteca. O navegador descarrega todo o resto para nada.
A segunda razão são as Core Web Vitals. A métrica LCP (Largest Contentful Paint) depende diretamente da rapidez com que o navegador recebe e renderiza as fontes. Um Font Awesome não reduzido bloqueia a renderização de texto até que o webfont carregue. Após o subsetting, o ficheiro torna-se suficientemente pequeno para que o navegador o receba no primeiro pedido de rede.
A terceira razão é o tráfego móvel. Os utilizadores com planos de dados limitados não lhe agradecerão por mais 400 KB em cada página. O subsetting devolve-lhe o controlo sobre o seu orçamento de carregamento.
Números reais: reduzir um ficheiro webfont de 345 KB para 14,5 KB aumentou a Pontuação de Performance do Lighthouse de 52 para 89 pontos num projeto. A diferença é visível a olho nu: a página torna-se interativa quase instantaneamente.
Método 1: mecanismo oficial de Kit (recomendado)
A abordagem mais simples e com melhor suporte é usar um Kit Font Awesome com subsetting integrado. Este método funciona com uma conta gratuita e não requer ferramentas de terceiros.
Como funciona
Um Kit é um pacote Font Awesome personalizado que configura no seu painel em fontawesome.com. Nas definições do Kit, existe uma secção "Icon Selection" com dois modos:
- Por Estilo: seleciona os estilos de que precisa (Solid, Regular, Brands) e o Kit carrega apenas esses. Só neste passo, corta dois dos três estilos se precisar apenas do Solid.
- Por Ícone: especifica ícones específicos através da pesquisa e o Kit gera um ficheiro contendo apenas esses. Este modo proporciona a compressão máxima.
Após guardar as definições, o Kit reconstrói automaticamente o pacote. Recebe uma tag <script> para inserir no <head> do seu site. A CDN do Font Awesome entrega a versão já reduzida. Sem ficheiros locais, sem compilação manual.
Vantagens da abordagem Kit
- Não precisa de descarregar e alojar ficheiros: a CDN do Font Awesome distribui o pacote reduzido globalmente
- Ao adicionar um novo ícone, basta atualizar a lista nas definições do Kit e a reconstrução acontece automaticamente
- Funciona com o Font Awesome Pro, incluindo os estilos Duotone e Sharp
- Suporta os modos SVG+JS e Webfonts+CSS
Quando um Kit não se adequa
A única limitação: um Kit reduzido não pode ser descarregado para o seu próprio servidor no plano gratuito. Se alojar fontes localmente for crítico para si (rede interna, política de segurança), um Kit não é uma opção. Nesse caso, veja os métodos 2 e 3.
Método 2: ferramenta online FontCut
Se não quiser registar-se no Font Awesome ou preferir um ficheiro ZIP pronto para colocar no seu repositório, experimente o FontCut.com. É um gerador online gratuito especificamente concebido para o Font Awesome 6.4.0 e Bootstrap Icons.
O processo tem três passos:
- Selecione um conjunto de ícones (Font Awesome Free 6.4.0, a versão mais recente disponível)
- Marque os ícones de que precisa na grelha visual
- Descarregue um arquivo ZIP com ficheiros CSS e webfont, faça upload para o seu servidor
O resultado é um pacote autónomo de 10 a 15 KB que aloja por si próprio. A ferramenta não requer registo e a pré-visualização mostra o tamanho final em tempo real.
Limitação: o FontCut usa o FA 6.4.0, não a versão atual 7.2.0. Para a maioria dos projetos, a diferença é negligenciável: os ícones de estilo solid não mudam entre versões. Mas se precisar de ícones adicionados no FA 7 (pacotes Pro+), o FontCut não os oferecerá.
Método 3: utilitário CLI fa-subset (para developers)
A deteção automática dos ícones usados é a abordagem mais precisa. O utilitário fa-subset (Python, BSD-2-Clause, instruções no Dev.to) analisa o código-fonte do seu projeto, encontra todas as classes fa-* e gera um webfont reduzido contendo apenas os ícones realmente utilizados.
Instalação:
1 pip install fonttools
Execução básica (simulação para análise):
1 python3 bin/fa-subset.py \ 2 --src ./src ./templates \ 3 --ext .html .php .twig .js \ 4 --pack solid:css=./css/fontawesome.min.css,font=./fonts/fa-solid-900.ttf \ 5 --out ./optimised \ 6 --dry-run
O utilitário produz uma lista dos ícones encontrados e o tamanho projetado do ficheiro reduzido. Sem a opção --dry-run, gera o CSS e a webfont prontos a usar na pasta ./optimised.
Pontos fortes do fa-subset:
- Analisa ficheiros PHP, HTML, JS, Blade, Twig, Vue, React e quaisquer ficheiros de texto no seu projeto
- Compreende ícones duotone (pontos de código duplos no Font Awesome 6+)
- Pode gerar um relatório JSON para pipelines de CI/CD:
--report-json ./report.json --strict-styles - Funciona com temas WordPress, templates Laravel e componentes React/Vue
Resultado real em produção: compressão de 803 KB (fontes + CSS) para 14,5 KB, uma redução de 98%. O utilitário é gratuito e não está vinculado aos serviços da Font Awesome.
Método 4: IcoMoon (construtor visual de fontes)
O IcoMoon é uma aplicação web para criar fontes de ícones personalizadas. Está disponível em icomoon.io/app. A abordagem é ligeiramente mais complexa do que a dos Kits, mas oferece uma capacidade única: misturar ícones de bibliotecas diferentes num único ficheiro.
Passo 1: selecionar o pacote Font Awesome
Aceda a icomoon.io/app, clique em "Add Icons From Library", localize o Font Awesome na lista e clique em "Add".
Passo 2: marcar os ícones de que precisa
Na janela de seleção, marque todos os ícones utilizados no seu site clicando em cada um deles. Pode selecionar várias bibliotecas ao mesmo tempo (por exemplo, Font Awesome + Material Icons) e obter um único ficheiro com ícones de ambos os conjuntos.
Passo 3: gerar e descarregar a fonte
Após a seleção, clique no botão "Generate Font" no fundo da página. O IcoMoon mostrará todos os ícones selecionados e disponibilizará um botão "Download". O arquivo ZIP contém os ficheiros da webfont (woff, woff2, eot, svg, ttf), um ficheiro style.css e uma demonstração demo.html.
Guarde os ficheiros no repositório do seu site e inclua o style.css no <head>. Se algo correr mal, abra o demo.html do arquivo: ele mostra exatamente como a fonte é incluída e utilizada.
O IcoMoon funciona bem quando precisa de misturar ícones de conjuntos diferentes ou quando, por princípio, não quer depender da CDN da Font Awesome.
Método 5: corte manual com o FontForge
É o método mais trabalhoso, mas também o que oferece maior controlo. Adequa-se a situações em que pretende compreender cada byte do ficheiro final ou trabalhar num ambiente sem acesso a serviços externos.
Passo 1: localizar o tipo de letra
Descarregue o Font Awesome do site oficial. Remova o link do CDN do <head>, se existir. Extraia o arquivo para o repositório do seu site.
Ligue o CSS localmente:
1 <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
Limpe a cache do navegador e recarregue o site. Os ícones devem ser exibidos como antes, mas agora controla os ficheiros no seu servidor.
Passo 2: remover ficheiros desnecessários
Depois de extrair o arquivo do Font Awesome, verá a estrutura de pastas:
Apenas os ficheiros CSS e webfont são necessários para o funcionamento. Os navegadores modernos só precisam do formato woff2, pelo que os ficheiros ttf, eot e svg podem ser eliminados.
Elimine as fontes Less e SCSS se não planear compilá-las. Mantenha apenas css/ e fonts/ com o ficheiro fa-solid-900.woff2 (ou equivalente para a sua versão).
Passo 3: editar a webfont no FontForge
Descarregue e instale o FontForge (um editor de fontes gratuito e de código aberto). Abra o ficheiro .woff2 através de Ficheiro → Abrir.
Na interface do FontForge, localize o painel de glifos. Para evitar percorrer manualmente, vá a Codificação → Compactar: todas as posições ocupadas serão movidas para o início.
Agora a parte mais crítica: mantenha a tecla Shift premida e selecione todos os glifos que o seu site NÃO utiliza. Elimine-os (Editar → Limpar). Mantenha apenas os ícones realmente presentes no seu markup: redes sociais, setas, ícones de menu, logótipos de marcas.
Guarde o resultado: Ficheiro → Gerar Fontes. Selecione Web Open Font Format (woff2) e especifique o nome do ficheiro. Substitua a webfont original na pasta fonts/ pela versão reduzida.
Recarregue o site e verifique todos os ícones. Se algum desapareceu, eliminou um glifo necessário: abra o FontForge novamente e repita a seleção com mais cuidado.
Ou talvez mudar apenas de biblioteca?
Por vezes, a melhor otimização não é otimizar o Font Awesome, mas escolher uma ferramenta que seja mais leve desde o início. As alternativas modernas fornecem ícones em formato SVG com tree-shaking ao nível da importação: apenas os ícones que importa explicitamente acabam no pacote final.
Três opções que vale a pena considerar:
Lucide Icons: mais de 1460 ícones, licença MIT, sucessor direto do Feather Icons. Ícones numa grelha de 24px, estilisticamente próximos do FA, mas o pacote pesa apenas kilobytes com tree-shaking. Para React/Vue/Svelte, componentes nativos com propriedades
size,colorestrokeWidth.Phosphor Icons: mais de 1400 ícones em seis estilos (thin, light, regular, bold, fill, duotone). Cada ícone é importado individualmente:
import { House } from '@phosphor-icons/react'. Sem lastro não utilizado.Bootstrap Icons: mais de 2000 ícones SVG, gratuitos, em desenvolvimento ativo. Compatibilidade direta com o ecossistema Bootstrap, mas utilizáveis de forma independente. Ficheiros SVG separados permitem incorporar ícones inline sem pedidos adicionais.
Se o seu site corre em WordPress, consulte o nosso guia sobre como adicionar o Font Awesome ao WordPress. Para quem quiser aprofundar o tema das webfonts, existe uma análise sobre como carregar webfonts sem bloquear a renderização.
⁉️🤔 Perguntas frequentes
O que é o subsetting de ícones e porque é necessário?
O subsetting é o processo de criar uma versão reduzida de uma fonte de ícones que contém apenas os ícones efetivamente usados no site. O pacote completo do Font Awesome 7 Free pesa cerca de 450 KB em ficheiros de webfont comprimidos. Um site típico usa 10 a 20 ícones; após o subsetting, o ficheiro encolhe para 10 a 15 KB. A diferença de carregamento reflete-se imediatamente na pontuação do PageSpeed: a melhoria típica é de 20 a 40 pontos.
Quantos ícones o browser carrega se eu ligar o Font Awesome via CDN?
Todos. Um link de CDN para
all.min.csscarrega o conjunto completo de três estilos: Solid, Regular e Brands. O browser carrega todos os ficheiros de webfont, mesmo que apenas um ícone seja usado na página. É exatamente por isso que a abordagem de CDN sem um Kit é a mais dispendiosa em bytes. Um Kit com a opção «By Icon» resolve este problema: o CDN fornece apenas os ícones que selecionou explicitamente nas definições.
Que método de otimização devo escolher para um site WordPress?
Se o seu site corre em WordPress e não quer lidar com a CLI, use o Kit oficial (método 1). A configuração demora 5 minutos no painel do fontawesome.com e os resultados são imediatamente servidos via CDN. Se a política de segurança proibir o uso de CDN, o FontCut (método 2) funciona: descarregue o ZIP, faça upload via FTP e ligue no
header.php. Para developers que querem automação, o fa-subset (método 3) pode analisar os templates PHP do seu tema e reconstruir a fonte em cada deploy.
É seguro eliminar os formatos de webfont ttf, eot e svg?
Sim. Os browsers modernos (Chrome, Firefox, Safari, Edge) suportam woff2 desde 2016. De acordo com os dados do Can I Use, a cobertura abrange mais de 98% do mercado global de browsers. O formato woff2 oferece melhor compressão (em média 30% mais compacto do que o woff). Os ficheiros eot (necessários apenas para o IE8), ttf e svg podem ser eliminados em segurança da pasta de fontes. Mantenha apenas o woff2 e, se precisar de suporte para Safari antigo no iOS 12 e versões anteriores, adicione o woff como fallback.
Vale a pena usar o Font Awesome em 2026?
Depende do projeto. Se já tem o Font Awesome implementado e usa 5 a 10 ícones, o subsetting (qualquer método acima) resolve o problema de peso numa hora. Se o projeto é novo e está a escolher uma biblioteca de raiz, considere o Lucide ou o Phosphor: são construídos com tree-shaking desde o início e geram zero overhead. O Font Awesome continua a ser líder em quantidade de ícones e integrações no ecossistema, mas o seu custo de peso sem subsetting é superior ao das alternativas SVG modernas.
Vale a pena preocupar-se com umas poucas dezenas de kilobytes?
Claro que sim. Cada kilobyte não otimizado no caminho crítico de renderização reduz diretamente a conversão. A Amazon calculou que 100 ms de atraso no carregamento custam 1% nas vendas. O Google penaliza páginas lentas nos resultados de pesquisa mobile. Isto não é perfecionismo; é economia direta.
Escolha o método adequado à sua situação:
- Esforço mínimo: Kit com a opção By Icon. 5 minutos, resultado imediato na CDN.
- Alojamento local, sem registos: FontCut. 10 minutos, ZIP no seu servidor.
- Automação CI/CD: fa-subset. Analisa o código, reconstrói no deploy.
- Controlo total: FontForge ou IcoMoon. Demora mais, mas conhece cada glifo.
Reduzir de 450 KB para 15 KB muda drasticamente a perceção de velocidade. Experimente num projeto, meça o PageSpeed antes e depois. O resultado falará por si.
Uma equipa profissional de escritores e editores especializados na criação de conteúdo de qualidade.