Identificador de fontes

Quer usar um identificador de fontes para saber qual fonte foi usada em uma imagem ou texto de um site? Quer saber como identificar uma fonte? Leia mais!

Ir para o artigo

Um identificador de fontes é bastante útil para saber qual fonte foi utilizada para compor uma imagem. Identificar uma fonte é imprescindível quando surge a necessidade de se aplicar um tipo diferenciado ao projeto e você viu, justamente, em uma “imagem de texto”. Melhor que um site que identifica a fonte, são vários recursos na web que identificam fontes!

Veja a seguir vários identificadores de fontes para auxiliar na identificação daquela fonte que está em alguma imagem ou em algum site.

WhatTheFont: identificador de font em imagens

WhatTheFont é um identificador de fontes por imagem (ou reconhecedor de fontes ou detector de fontes) bastante conhecido, usado há muito tempo para identificar fontes por profissionais de vários nichos e áreas de atuação.

Ele usa deep learning para identificar e procurar fontes em seu catálogo com mais de 133.000 famílias de fontes, tentando garantir a identificação mais precisa da fonte a partir da imagem fornecida.

Quando se acessa o site do WhatTheFont, a primeira coisa é fazer o upload do arquivo de imagem que se quer identificar a fonte.

Identificador de fonte: imagem da tela de upload do WhatTheFont.
É possível fazer upload da imagem para identificar a fonte também via Drag-and-drop

Como consta nas próprias dicas de submissão/indicação do WhatTheFont, melhores resultados serão apresentados em:

  • Imagem de boa qualidade
  • Caracteres que tenham a forma bastante distinta na imagem
  • Imagens com fontes não editadas diretamente
  • Texto o mais horizontal possível (a ferramenta deixa rotacionar)

Para fazer um teste de identificação de fonte no WhatFont, vamos testar o logo da webfatorial:

Logo da empresa webfatorial, responsável pelo blog desenvolvimento para web (ou dpw).
webfatorial é a empresa responsável pelo dpw

Como é possível perceber, além das fontes também existe um símbolo (2 triângulos estilizados). A noa notícia é que, ainda assim, o WhatTheFont consegue realizar a identificação da fonte de maneira bem satisfatória.

Depois do upload da imagem, será preciso fazer um box para indicar à ferramenta onde, na imagem, está a fonte a ser identificada.

Identificador de fonte: fazendo box de identificação no WhatTheFont.
WhatTheFont oferece as opções de rotacionar a imagem e adicionar novos boxes, para garantir uma identificação mais acurada.

Depois de indicado corretamente onde está a fonte na imagem (através de 1 ou mais boxes), basta clicar no botão azul com a seta para ir para o próximo passo, que já é a identificação da fonte, tela em que as sugestões de fontes selecionadas serão exibidas.

Ao final do processo, então, as possíveis fontes identificadas serão indicadas e, caso realmente sejam uma daquelas indicadas, parabéns, você acabou de identificar a fonte!

Identificador de fontes: sugestões de fontes do WhatTheFont.
MyFonts é um site comercial, então, sim, eles querem que você compre alguma coisa deles, o que não é algo ruim, pois a ferramenta deles é realmente muito boa para identificar fontes.

Nesta tela de sugestões de possíveis fontes sugeridas, você terá a oportunidade de avaliar as sugestões do WhatTheFont e adquirir a fonte identificada.

O WhatTheFont é um dos melhores sites para identificar fonte a partir de imagem não é a toa, já que suas identificações são muito boas e, geralmente, bastante precisas. É uma excelente ferramenta para identificar fontes.

Identify Fonts (Matcherator) do Font Squirrel

Um outro excelente site para identificar fontes de imagens (que também pode ser considerado um aplicativo identificador de fontes online) é o Identify Fonts (Matcherator), do Font Squirrel.

Esse site identificador de fontes através de imagem tem funcionamento parecido com WhatTheFont. Primeiramente, acesse o site Identify Fonts e faça o upload da imagem.

Identificador de fonte: Identify Fonts (Matcherator) em sua tela pós-upload.

No Matcherator, também é preciso que se faça um box no local-alvo onde constam as letras da fonte a ser identificada, a diferença é que ele automaticamente vai identificar cada uma delas e colocar uma marcação.

Se preciso for, também há a possibilidade de rotacionar a imagem para uma identificação mais precisa — nesse tipo de identificador de fontes por imagem, quanto mais horizontal estiver o escrito, melhor o resultado.

Estando tudo nos conformes, basta clicar no botão “Matcherate It!” para que o identificador de fontes em imagens online entre em ação.

Identificador de fonte: resultado do Identify Fonts.
Nos resultados de identificação, você poderá adquirir a fonte desejada ou simplesmente baixá-la, caso seja uma fonte grátis.

Geralmente, o Matcherator provê resultados interessantes, mas, caso não sejam do agrado, na tela de resultado existe o botão “Manually Adjust” (Ajuste Manual), que abre a opção de auxiliar a ferramenta informando se cada letra identificada realmente teve a correspondência correta.

Identificador de fonte: ajuste manual do identificador de fontes em cada letra.
Perceba que há, também, a opção de fazer com que os resultados somente exibam fontes grátis.

Com essa ajudinha de informar manualmente cada letra, certamente os resultados poderão ser melhores no Identify Fonts, este identificador de fontes grátis que também é um dos mais conhecidos e usados.

Font Finder

Font Finder é outro identificador de fontes em imagens bastante competente, contando com uma boa tecnologia para identificar fontes através de um catálogo com mais de 550 mil fontes!

O funcionamento do Font Finder é similar aos identificadores de fonte mostrados anteriormente: acesse o site do Font Finder e faça o upload da imagem-alvo.

Identificador de fonte: Font Finder, tela de upload da imagem para a identificação de fonte.
O Font Finder oferece, também, a possibilidade de indicar o URL da imagem para identificar a fonte.

Na tela seguinte, será preciso informar (manualmente) ao Font Finder a correspondência de letras que foram identificadas para que ele faça uma correta identificação. Mas não se preocupe: informar de 6 a 8 letras já é o suficiente.

Identificador de fonte: é preciso informar manualmente algumas letras no Font Finder.
Claro que não é possível informar a correspondência para símbolos (2 primeiros slots), então, basta deixar em branco.

Ao clicar em “Continue”, o resultado de identificação é mostrado, sendo exibidas as correspondência feitas pelo identificador de fontes em imagens online.

Identificador de fonte: resultado de identificação de fontes no Font Finder.

Fique atento a opções extras em todas as etapas de uso da ferramenta (que ajudam no reconhecimento da fonte) e, também, ciente de que alguns recursos só estarão disponíveis depois que você fizer um cadastro e/ou assinatura dos serviços do Font Finder.

WhatFont: identificador de fonte em sites

Uma demanda também bastante comum, principalmente quando se trata de trabalhos relacionados à Web, é ser preciso identificar fontes em sites. Um identificador de fontes que consegue saber informações sobre uma ou mais fontes usadas em uma página web é bastante útil.

O WhatFont serve justamente para isso, para identificar a fonte (ou fontes) de um site de uma maneira muito, muito simples!

A vantagem é que ele pode ser usado de 2 maneiras diferentes: através de uma extensão para Chrome ou Safari ou através de um bookmarklet.

WhatFont: bookmarklet

A opção de usar o WhatFont como uma extensão do Chrome ou Safari é bastante interessante, mas instalar o WhatFont como bookmarklet para identificar fontes de sites é muito mais prático, rápido e leve (já que não consome recursos do navegador).

Para usar o WhatFont em seu formato bookmarklet para identificar a fonte usada em um site, basta entrar no site do WhatFont, rolar a tela até o ponto em que está escrito “How to use it?” (“Como usar”), selecionar a opção “Bookmarklet” e clicar e arrastar o botão para seus favoritos do navegador.

Identificador de fontes WhatFont: como slavar o bookmarklet
Somente arraste o botão para os favoritos e pronto!

A partir daí, sempre que estiver em algum site e queira ver a fonte identificada, basta clicar no bookmarklet do WhatFont que você vai entrar em uma espécie de Modo Identificador de Fontes.

Vai ficar junto ao cursor do mouse uma caixa preta; basta você começar a passar o mouse nos textos que você quer ver a fonte identificada e, instantaneamente, vai aparecer o nome da fonte nesse box.

Identificador de fontes Whatfont: mouse over em texto para identificar a fonte
Só passe o mouse em cima do texto que quer identificar e o nome vai aparecer.

Com isso, você já consegue identificar a fonte do site. Mas não para por aí, pois o WhatFont pode oferecer muito mais informações sobre a fonte identificada!

Se você clicar na fonte, ele vai abrir um box com muito mais informações, como tamanho da fonte (font-size), altura de linha (line-height), cor da fonte (color) e outras informações.

Identificador de fontes Whatfont: clique no texto para mais informações sobre a fonte identificada
Clique no texto para muito mais informações sobre a fonte identificada!

E é por isso que o WhatFont versão bookmarklet é tão popular e usado no mundo todo: ele é um identificador de fonte que com apenas um clique consegue informar qual é a fonte usada no site e mais informações, como tamanhos, cores etc.

Depois de identificar, como usar a fonte personalizada no site?

Depois que você conseguir identificar qual é a fonte usada em uma imagem através de uma das ferramentas que indicamos, agora você pode usá-la em seus sites, apps e páginas web.

Para fazer isso, você deve usar @font-face de CSS, que serve justamente para trabalhar com fontes personalizadas através de folhas de estilo.

Mas na Web as fontes devem ter formatos de arquivos específicos para poderem funcionar corretamente, como WOFF, WOFF2, dentre outros. Você precisará converter o arquivo original da fonte identificada (geralmente TTF ou OTF) para os formatos de fontes de web.

Mas não se preocupe, também temos uma indicação de ferramenta de como converter fontes para o formato correto para ser usado na web!

Assista ao nosso vídeo com a recomendação dessa ferramenta de converter fontes:

Conclusão sobre identificadores de fontes

Como foi visto, quando for preciso identificar a fonte para um projeto, site ou app, é possível fazer isso usando WhatTheFont, Identify Fonts, Font Finder (para identificar fontes em imagens) ou WhatFont (para identificar fontes usadas em sites).

Apesar de não serão possível identificar a fonte em 100% dos casos, certamente vale a pena experimentar as ferramentas para começar a identificação, já que, caso se consiga essa identificação positiva, muito do trabalho (e tempo) que é identificar uma fonte em uma imagem e/ou site é poupado.

Tanto  WhatTheFont, Identify Fonts, Font Finder e WhatFont são excelentes identificadores de fontes para se ter à disposição quando surgir a necessidade de identificar fontes em algum projeto ou para algum trabalho.

E-book que explica os 3 conceitos fundamentais de CSS para você entender de uma vez por todas e parar de brigar com CSS!

Usamos cookies para melhorar sua experiência e para ajudar a entender como nosso site é usado. Ao utilizar este site, você aceita o uso de cookies. Consulte nossa política de privacidade para obter mais informações.