Está a percorrer um feed de sites e, de repente, lá está ela. A fonte perfeita que andava a procurar há semanas. Aquele floreado particular no «a» minúsculo e as proporções que fazem o tipógrafo dentro de si soltar um grito de entusiasmo. Mas o nome? O autor do site não o identificou, vasculhar o CSS leva tempo e o suporte do designer está de férias.

Uma fonte no ecrã é uma propriedade CSS, não uma imagem. O navegador entrega honestamente o nome, o peso, o tamanho e até a fundidora a quem souber onde procurar. Nos últimos anos, as ferramentas de identificação de fontes evoluíram de um separador das DevTools para extensões que mostram preços de licenças, sugerem alternativas gratuitas e guardam descobertas numa coleção.

Neste guia, cinco métodos: do instantâneo (clique direito) ao avançado (análise do ficheiro binário da fonte). Nenhum requer formação em design ou uma subscrição paga.

💡 Visão geral rápida:

• Fontanello: clique direito e o nome da fonte já está no menu de contexto (Chrome, Firefox, Edge, iOS)
• WhatFont: passe o cursor sobre o texto e veja a família, o tamanho, a cor e o serviço de entrega (Chrome, Safari)
• Fonts Ninja: identifica a fonte, mostra o preço e guarda descobertas nos favoritos (Chrome)
• Inspetor integrado: método universal para qualquer navegador, sem extensões
• What Can My Font Do?: carregue o ficheiro da fonte e o serviço descodifica até uma fonte renomeada

Comparação de métodos: tabela

1. Fontanello, a fonte no menu de contexto

Fontanello, uma extensão que adiciona o nome da fonte diretamente ao menu de contexto do navegador. Destaque o texto, clique com o botão direito, escolha Fontanello e vê não só a família da fonte, mas também o peso, o tamanho, o espaçamento entre letras e a cor. Sem painéis adicionais, sem necessidade de ativar a ferramenta na barra de ferramentas.

A extensão funciona no Chrome, Firefox, Edge e no iOS. Este é o método mais rápido de todos os existentes: literalmente uma ação. Não precisa de passar o cursor em lado nenhum, não precisa de alternar entre separadores das DevTools, clique direito e a resposta está mesmo à sua frente.

Vantagens:

• Uma ação: clique direito e resultado no menu de contexto
• Suporta quatro plataformas: Chrome, Firefox, Edge, iOS
• Mostra atributos adicionais: tamanho, cor, espaçamento entre letras

Desvantagens:

• Não identifica fontes renomeadas
• Não guarda o histórico das fontes encontradas

Fontanello, a escolha para quem valoriza a rapidez. Um clique, sem ativação, sem movimentos extra.

🔗 Fontanello na Chrome Web Store

2. WhatFont, passe o cursor e descubra

WhatFont, uma das extensões mais populares para identificação de fontes: três milhões de utilizadores e uma classificação de 4,0 na Chrome Web Store. O princípio é simples: clique no ícone do WhatFont na barra de ferramentas, passe o cursor sobre o texto e aparece um painel sobre a página com informação completa sobre a fonte.

Ao contrário do Fontanello, o WhatFont permite destacar vários fragmentos de texto em simultâneo e comparar fontes visualmente. A extensão mostra a família da fonte, o peso, o tamanho, a altura de linha e a cor. Um ponto positivo adicional: identifica a origem de entrega da fonte: Google Fonts API, Adobe Fonts (anteriormente Typekit) ou @font-face local.

Vantagens:

• Três milhões de utilizadores, extensão estável e comprovada
• Mostra o serviço de entrega da fonte: Google Fonts, Adobe Fonts, local
• Funciona no Chrome e no Safari

Desvantagens:

• Requer clicar no ícone para ativação, uma ação extra em relação ao Fontanello
• Sem versão para o Firefox

🔗 WhatFont na Chrome Web Store

3. Fonts Ninja, o canivete suíço do designer

O Fonts Ninja foi além da simples identificação de fontes. Além do nome e das propriedades CSS, a extensão mostra: quantos estilos estão disponíveis para a fonte encontrada, o nome da fundidora produtora, o preço da licença e, o que é especialmente valioso, uma lista de fontes semelhantes.

O sistema de favoritos integrado poupa horas aos designers. Encontrou uma fonte interessante no site de outra pessoa, guardou-a na coleção diretamente da extensão e mais tarde partilhou a lista com a equipa. A pesquisa funciona por forma do glifo, tipo de licença e preço, conveniente quando precisa de uma alternativa económica a uma fonte cara.

A extensão é usada por 900 mil pessoas, com classificação de 4,4. Funciona apenas no Chrome, para já. Em tamanho, é mais pesada do que o WhatFont, 2 MB contra 741 KB, mas a funcionalidade justifica-o.

Vantagens:

• Mostra o preço da fonte, a fundidora e alternativas semelhantes
• Favoritos integrados para as fontes encontradas
• Pesquisa por forma do glifo e tipo de licença

Desvantagens:

• Apenas Chrome, sem versões para Safari e Firefox
• Mais pesada do que as alternativas: 2 MB contra 741 KB do WhatFont

🔗 Fonts Ninja na Chrome Web Store

4. Inspetor integrado, método universal sem extensões

Quando não quer instalar extensões ou trabalha num navegador para o qual elas não existem, todos os navegadores modernos têm uma ferramenta integrada para identificação de fontes. Isto é mais lento do que as extensões, mas não requer qualquer instalação.

Google Chrome. Clique com o botão direito no texto e escolha «Inspecionar». O painel das DevTools será aberto. No separador Styles, encontre a propriedade font-family, que lista todas as fontes aplicadas ao elemento. A primeira da lista é a que está a ser renderizada neste momento.

Firefox. O Firefox tem um separador dedicado «Fontes» no inspetor. Clique direito → «Inspecionar elemento» → vá para o separador Fontes. Verá não só o nome da fonte, mas também o seu peso, tamanho e até uma pré-visualização dos glifos, algo que nenhuma extensão tem.

Safari. Primeiro, ative o menu «Desenvolvimento»: Safari → Preferências → Avançado → marque «Mostrar menu Desenvolvimento na barra de menus». Agora, clique com o botão direito no texto → «Inspecionar elemento». Na barra lateral, escolha «Estilos, Computado» e encontre a secção font-family.

Vantagens:

• Nada para instalar, integrado em todos os navegadores
• O Firefox mostra pré-visualização de glifos no separador Fontes
• Funciona para qualquer elemento, não apenas texto

Desvantagens:

• Mais lento do que as extensões: 10-30 segundos contra resultado instantâneo
• Inconveniente para visualização em massa de fontes numa página

5. What Can My Font Do?, descodificar fontes renomeadas

Um obstáculo sério para todas as extensões e para o inspetor é uma fonte renomeada. Quando um programador monta um pacote personalizado, o nome font-family perde a ligação ao original: em vez de Inter ou Roboto, vê algo como custom-font-3742. As extensões são impotentes, leem a propriedade CSS, não o ficheiro em si.

A solução é o serviço What Can My Font Do?. O algoritmo:

• Através do inspetor do Chrome, vá ao separador Application → Frames → Fonts. Encontre o ficheiro da fonte fazendo corresponder o nome do ficheiro ao que vê em font-family.
• Abra o ficheiro da fonte num novo separador, ele será descarregado.
• Arraste o ficheiro descarregado para a janela do What Can My Font Do?. O serviço analisará os dados binários e mostrará: o nome real da fonte, a fundidora, o número de glifos, o suporte de idiomas, a licença e todos os caracteres em forma de tabela.

Este não é um método instantâneo, requer um minuto ou dois e uma compreensão básica das DevTools. Mas quando as extensões falham perante uma fonte renomeada ou montada à medida, o What Can My Font Do? é o único método que funciona.

Vantagens:

• Identifica fontes renomeadas através da análise do ficheiro binário
• Mostra informação completa: glifos, idiomas, licença
• Serviço web gratuito, sem necessidade de instalação

Desvantagens:

• Lento: um a dois minutos por fonte
• Requer compreensão do separador Application nas DevTools

Vídeo: como identificar uma fonte num minuto

Veja um tutorial passo a passo dos cinco métodos em ação, das extensões ao inspetor:

⁉️🤔 Perguntas frequentes

As extensões de fontes são seguras? Não recolhem dados?

O WhatFont, o Fontanello e o Fonts Ninja não recolhem dados pessoais nem transmitem informações sobre os sites visitados. Na listagem da Chrome Web Store do WhatFont, o programador afirma explicitamente: a extensão não recolhe nem utiliza dados do utilizador. O Fonts Ninja solicita mais permissões, mas isso é necessário para o funcionamento da funcionalidade de favoritos de fontes.

É possível descobrir uma fonte comercial e o preço da sua licença?

O Fonts Ninja é a única extensão da lista que mostra o preço da licença diretamente ao passar o cursor sobre o texto. Para projetos comerciais, isto poupa horas: não é preciso procurar a fonte separadamente no MyFonts ou no Adobe Fonts para saber o custo.

O que fazer se a fonte for identificada, mas não puder ser descarregada?

As fontes em sites estão quase sempre protegidas por direitos de autor. Descobrir o nome é legal. Descarregar e usar sem licença não é. Se a fonte for comercial (por exemplo, do catálogo da Linotype ou da Monotype), compre uma licença no site da fundidora. As fontes gratuitas estão, na maioria das vezes, alojadas no Google Fonts e podem ser usadas livremente em qualquer projeto.

Porque é que o Firefox mostra a fonte, mas o Chrome não?

Isto acontece quando uma fonte é ligada via @font-face com formatos diferentes: WOFF2 para o Chrome, WOFF para versões mais antigas do Firefox. Se a fonte não for exibida no Chrome, verifique a consola das DevTools no separador Console: talvez o ficheiro da fonte esteja bloqueado pela política CORS ou não tenha carregado devido a um bloqueador de anúncios.

Que método deve um programador frontend escolher e qual deve um designer escolher?

Para um programador frontend, o inspetor integrado é mais conveniente, já está aberto no fluxo de trabalho, não é preciso alternar. Para um designer, o Fonts Ninja: mostra o preço, alternativas e permite guardar descobertas nos favoritos para projetos futuros. Para verificações pontuais do tipo «que fonte é esta?», use o Fontanello, um clique e a resposta está mesmo à sua frente.

Que ferramenta de identificação de fontes escolher?

A melhor escolha depende da tarefa. Se é um programador frontend e o inspetor já está aberto, mantenha-se nele, o separador Fontes no Firefox dará mais informação do que qualquer extensão. Se é um designer à procura de referências, instale o Fonts Ninja pelos favoritos, preços e fontes semelhantes. Para verificações rápidas, o Fontanello é o rei da rapidez: clique direito e está feito.

E quando nenhuma extensão consegue dar resposta, fonte renomeada, compilação personalizada, pacote caseiro, carregue o ficheiro para o serviço de análise de fontes What Can My Font Do?. Este é o último recurso que funciona sempre.