Sumário
Quando uma extensão de fontes é a ferramenta certa
Uma extensão é ideal quando você pode abrir a página original e passar o mouse sobre texto HTML real. O navegador já conhece a pilha de fontes, o tamanho calculado, o peso, a altura de linha e a cor.
Isso é diferente de encontrar uma fonte em imagem estática. Se o texto está em logo, pôster, captura, anúncio, exportação do Canva ou PDF achatado, a extensão não tem CSS para ler. Nesse caso, use correspondência visual.
Regra prática
Se você consegue selecionar o texto, comece com uma extensão. Se vê apenas pixels, envie a imagem ao Font Detector.
Melhores extensões para identificar fontes
A maioria faz o básico, mas muda em velocidade, detalhes e encaixe no fluxo. Use a opção simples para descobrir o nome; use uma ferramenta mais completa se compara tipografia com frequência.
| Extensão | Melhor para | Mostra | Limites |
|---|---|---|---|
| WhatFont | Checagens rápidas em sites | Família, tamanho, peso, cor e detalhes básicos | Não resolve texto em imagem |
| Fonts Ninja | Designers comparando várias fontes | Detalhes, prévias e fontes detectadas | Mais interface que o usuário casual precisa |
| Fontanello | Desenvolvedores que querem CSS | Família, peso, tamanho, cor e propriedades CSS | Depende de texto selecionável |
| DevTools | Verificação final | CSS calculado e fonte renderizada | Mais lento que uma extensão |
Como usar uma extensão para identificar fontes
A interface varia, mas o fluxo costuma ser este:
- Instale uma extensão confiável pela loja oficial do navegador.
- Abra a página que contém a fonte desejada.
- Ative a extensão e passe o mouse ou clique no texto.
- Anote família, peso, tamanho, altura de linha, cor e fontes de fallback.
- Se o resultado parecer genérico, confirme no DevTools.
Não pare no primeiro nome
Muitos CSS usam pilhas como Inter, Arial, sans-serif. O primeiro nome é a intenção, mas o navegador pode renderizar uma fonte reserva se a webfont falhar.
Como verificar uma fonte de site com DevTools
Quando a decisão depende da fonte exata, use a extensão como atalho e o DevTools como confirmação final.
- Clique com o botão direito no texto e escolha Inspecionar.
- Selecione o elemento que contém o texto visível.
- Abra Computed e procure font-family.
- Verifique font-size, font-weight, line-height e letter-spacing.
- No Chrome ou Edge, consulte a área de fontes renderizadas quando disponível.
Isso importa porque sites usam fontes variáveis, longas pilhas de fallback e tipografia responsiva que muda por dispositivo, largura, idioma ou carregamento.
Quando uma extensão de fontes não funciona
A extensão depende de texto ativo no DOM. Decida pelo formato da origem:
| Origem | Use | Por quê |
|---|---|---|
| Logo ou imagem | Font Detector | O texto é pixel e precisa de comparação visual. |
| Captura | Font Detector ou a página original | A extensão só funciona na página ativa. |
| PDF achatado | Captura mais detecção IA | Pode não haver metadados de fonte. |
| PDF selecionável | Propriedades do PDF primeiro | A lista de fontes incorporadas pode revelar o nome exato. |
Um fluxo confiável para identificar fontes
Em projetos reais, combine sinais conforme a origem:
- Site ativo: Use a extensão e confirme a fonte calculada e renderizada no DevTools.
- Captura ou logo: Recorte a palavra exata e envie ao Font Detector.
- PDF: Confira fontes incorporadas; se estiver achatado, use captura limpa e IA.
- Resultado incerto: Compare letras como a, g, R, S, números, contraste dos traços e espaçamento.
Perguntas frequentes
Referências e fontes
- Documentação do Google Chrome DevTools para inspecionar CSS — https://developer.chrome.com/docs/devtools/css
- Listagem do WhatFont na Chrome Web Store — https://chromewebstore.google.com/
- Site oficial do Fonts Ninja — https://www.fonts.ninja/
Última atualização: 22 de maio de 2026
Voltar ao Font Detector