Uma fonte não é apenas «letras bonitas». Controla a atenção, define o ambiente e afeta diretamente a legibilidade. Uma má escolha tipográfica afasta os visitantes de um site em segundos, mesmo que o conteúdo seja excelente.

Por vezes, visita um website e repara que o texto parece caro e elegante. Quer descobrir qual a fonte utilizada, para o seu próprio projeto ou simplesmente por curiosidade profissional. Mas os proprietários dos sites não identificam a tipografia e alguns até alteram intencionalmente os nomes das fontes no CSS para dificultar a identificação.

Boas notícias: é possível identificar uma fonte de qualquer website. Não precisa de ser programador front-end ou designer; três abordagens cobrem praticamente todos os cenários. Desde o inspetor integrado do navegador a extensões de um clique e serviços para fontes em imagens.

💡 Visão geral rápida:

• Abra as DevTools (F12) e encontre font-family no separador Computed

• Instale o Whatfont ou o Fontanello e passe o cursor sobre o texto

• Carregue uma captura de ecrã para o Font Squirrel Matcherator ou WhatTheFont

1. Inspetor integrado do navegador

O método mais acessível, que não requer qualquer instalação. Todos os navegadores modernos (Chrome, Firefox, Edge, Safari) contêm ferramentas de programação (DevTools). Entre elas, está um inspetor que mostra as propriedades CSS de qualquer elemento na página, incluindo a fonte.

Como abri-lo. No Windows, prima Ctrl + Shift + I; no Mac, Cmd + Shift + I. Ou clique com o botão direito do rato no texto e selecione «Inspecionar» / «Ver código». O painel das DevTools será aberto.

No lado esquerdo do painel, verá a estrutura HTML; no lado direito, as regras CSS. Mas o caminho mais rápido para a fonte é através do separador Computed. Percorra a lista de propriedades até font-family; este é o nome do tipo de letra. Ao lado, o navegador mostra o ficheiro de fonte específico que está a ser renderizado na página.

Existe também um caminho alternativo para quem quiser ver todas as fontes do site de uma só vez. Nas Chrome DevTools, abra o separador Application → secção Frames → pasta Fonts. O navegador exibirá uma lista de todos os ficheiros de fonte carregados, com o seu URL e formato (woff2, ttf). É mais lento, mas revela o que está oculto em @font-face.

Vantagens: gratuito, não requer extensões, mostra o nome exato da fonte e o seu estilo (peso, estilo, tamanho). Desvantagens: requer vários cliques; o método não funciona em dispositivos móveis.

2. Extensões do navegador

Se verifica fontes com frequência, uma extensão poupar-lhe-á horas. O princípio é simples: passa o cursor sobre o texto e a extensão exibe o nome da fonte e os seus parâmetros CSS numa dica de contexto.

2.1 Whatfont

A solução mais popular neste nicho. Recomendada pela Wired, Lifehacker e SwissMiss. A instalação a partir da Chrome Web Store faz-se com um clique.

Após a instalação, clique no ícone da extensão no canto superior direito do navegador para ativar o modo de deteção. Agora, quando passar o cursor sobre qualquer texto, o Whatfont exibe o tipo de letra diretamente acima do cursor. Clicar no texto revela a ficha completa: família, peso, tamanho, altura de linha e cor.

A extensão também funciona no Firefox e Safari (através de uma adaptação). Gratuita, sem necessidade de registo, código aberto no GitHub.

🔗 Whatfont na Chrome Web Store

2.2 Fontanello

Enquanto o Whatfont mostra a informação ao passar o rato, o Fontanello funciona através do clique direito. Selecione texto num site, prima o botão direito do rato e escolha Fontanello no menu de contexto. Surge um painel com informação completa: nome da fonte, peso, tamanho, cor e até a relação de contraste do texto face ao fundo (um critério de acessibilidade).

O Fontanello está disponível para Chrome e Firefox. Uma vantagem adicional: a extensão não sobrecarrega a página com monitorização constante; só é ativada quando a solicita.

🔗 Fontanello na Chrome Web Store

2.3 Fonts Ninja

Uma ferramenta mais potente, com uma funcionalidade de «ADN da fonte»: um algoritmo proprietário que analisa os ficheiros tipográficos para obter resultados mais precisos. Além de identificar fontes ao passar o rato, o Fonts Ninja permite guardar as fontes encontradas nos favoritos e mostrar um resumo de todos os tipos de letra usados numa página.

Há uma ressalva: os favoritos e algumas funcionalidades exigem registo. Mas a identificação básica de fontes funciona sem conta. A extensão é paga (com período experimental), pelo que vale a pena considerá-la se trabalha profissionalmente com tipografia.

🔗 Fonts Ninja na Chrome Web Store

3. Como identificar uma fonte a partir de uma imagem

O inspetor e as extensões são impotentes quando a fonte faz parte de uma imagem: um logótipo, banner ou meme. O texto numa imagem não é um elemento HTML, o que significa que não tem propriedades CSS. Existem serviços especializados para estes casos.

3.1 Font Squirrel Matcherator

Uma ferramenta gratuita do Font Squirrel, comprovada ao longo dos anos. Como funciona:

• Carregue uma captura de ecrã ou fragmento de texto na interface do Matcherator
• Selecione a área que contém as letras (marcador azul na barra de ferramentas)
• Clique em «Matcherate It!»

O serviço analisa as formas dos caracteres e devolve uma lista das correspondências mais próximas da sua base de dados. Se não houver uma correspondência exata, sugere alternativas visualmente semelhantes com uma percentagem de similaridade. Funciona até com fontes manuscritas, desde que as letras não estejam unidas.

🔗 Font Squirrel Matcherator

3.2 WhatTheFont da MyFonts

O WhatTheFont utiliza aprendizagem profunda e uma base de dados com mais de 233 000 fontes. Carregue uma imagem, clique na letra pretendida e o algoritmo encontra correspondências. A sua principal vantagem em relação ao Matcherator: o WhatTheFont lida com escritas ligadas, em que as letras se unem umas às outras. Esta é uma capacidade técnica séria que falta nos serviços mais antigos.

Para obter os melhores resultados, carregue texto horizontal com boa resolução e num fundo contrastante.

🔗 WhatTheFont no MyFonts

Vídeo: identificar uma fonte num minuto

Uma breve demonstração de como instalar a extensão Identify Font e encontrar uma fonte em qualquer site sem abrir as DevTools:

⁉️🤔 Perguntas frequentes

Posso identificar um tipo de letra num site para telemóvel?

Sim, mas com limitações. As extensões não estão disponíveis nos navegadores móveis, e as DevTools também não. A abordagem funcional: tire uma captura de ecrã do texto no seu telemóvel e carregue-a no WhatTheFont ou no Font Squirrel Matcherator através de um computador. Se o texto no site for grande e nítido, o serviço reconhecerá o tipo de letra a partir da captura de ecrã com o mesmo sucesso que a partir de uma imagem de desktop.

E se o proprietário do site tiver renomeado o tipo de letra no CSS?

Alguns programadores alteram a propriedade font-family nos estilos para um nome arbitrário, embora estejam efetivamente a carregar um ficheiro de tipo de letra específico. Neste caso, o método das DevTools através do separador Application (Frames → Fonts) mostrará os URLs reais dos ficheiros de tipo de letra. A partir do nome do ficheiro (por exemplo, Inter-Regular.woff2) pode identificar facilmente o tipo de letra. Extensões como o Fonts Ninja com «análise de ADN» também contornam a renomeação ao analisar o próprio ficheiro em vez da propriedade CSS.

Qual é o método mais preciso?

Para texto numa página: a extensão Whatfont ou Fontanello; um passar do rato e tem o nome exato. Para imagens: o WhatTheFont com o seu motor de rede neural é mais preciso do que o Matcherator para tipos de letra conectados e decorativos. Para certeza absoluta com CSS renomeado: DevTools → Application → Fonts, onde vê o URL real do ficheiro de tipo de letra; o erro é impossível aqui.

É preciso pagar para identificar tipos de letra?

Não. Todos os métodos mencionados neste artigo são gratuitos. As DevTools estão integradas no navegador. O Whatfont e o Fontanello são extensões gratuitas com código aberto. O Font Squirrel Matcherator é um serviço web gratuito. O WhatTheFont é gratuito (monetizado através da venda de tipos de letra, não da identificação). O Fonts Ninja tem uma versão paga, mas a identificação básica de tipos de letra funciona sem pagamento.

Posso aplicar automaticamente um tipo de letra descoberto ao meu próprio site?

Tecnicamente, sim, mas legalmente depende da licença do tipo de letra. Pode identificar o tipo de letra livremente. No entanto, só o pode usar no seu próprio site se o tipo de letra tiver uma licença aberta (SIL Open Font License, Apache 2.0) ou se tiver adquirido uma licença comercial. O Google Fonts, o Font Squirrel e o Adobe Fonts são fontes seguras com termos de utilização claros.

Qual o método de identificação de tipos de letra a escolher

Se está a abordar esta questão pela primeira vez, comece pelas DevTools. É gratuito, demora 30 segundos e não requer instalação. Para trabalho regular com tipografia, instale o Whatfont: um passar do rato em vez de quatro cliques.

Quando um tipo de letra está escondido numa imagem, carregue uma captura de ecrã para o WhatTheFont. É o serviço de pesquisa baseado em imagem gratuita tecnologicamente mais avançado. E se o tipo de letra estiver renomeado no CSS, aceda ao ficheiro através de Application → Fonts nas DevTools: este caminho revela a verdade independentemente de quaisquer truques de programação.

Lembre-se: encontrar um tipo de letra não é difícil. A parte mais difícil é aplicá-lo corretamente. Verifique a licença, teste a legibilidade em conteúdo real e não misture mais de dois tipos de letra num único projeto. A boa tipografia não grita; funciona.