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 fonte online (ou reconhecedor de fontes) bastante tradicional e bastante conhecido, usado há muito tempo para identificar fontes por profissionais de vários nichos e áreas de atuação.

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

Identificador de fonte: imagem da tela de upload ou URL da imagem.

Como consta nas próprias dicas de submissão/indicação de imagens, melhores resultados serão apresentados quando a fonte contida na imagem possuir as seguintes características:

  • Caracteres que tenham a forma bastante distinta na imagem
  • Imagens com fontes não editadas diretamente
  • Texto deve ser o mais horizontal possível

Para o teste, usemos esta imagem:

Identificador de fontes: imagem de teste é o logo do Anonymouse

Como é possível perceber, além das fontes também existe um símbolo (a máscara). A noa notícia é que, ainda assim, o WhatTheFont consegue realizar a identificação.

Depois do upload ou indicação da URI da imagem, é preciso confirmar para o WhatTheFont se as letras que ele reconheceu realmente são válidas: digitar em vários campos a respectiva letra destacada.

Identificador de fontes: indicação de cada letra

Neste ponto, possível o WhatTheFont vai querer que se identifique, também, possíveis elementos gráficos da imagem que não as próprias fontes. Se for o caso, basta deixar o campo vazio e prosseguir.

Identificador de fontes: resultado da identificação

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!

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 uma fonte para um projeto, site ou app, é possível fazer isso usando o WhatTheFont (para identificar fontes em imagens) ou o WhatFont (para identificar fontes usadas em sites).

Por consultar informações contidas no código do site, o WhatFont em quase 100% das vezes vai conseguir identificar a fonte bem, mostrando seu nome e informações. Já o WhatTheFont, por ser mais difícil identificar a fonte de uma imagem, talvez apresente um índice de acerto menor.

Mas, apesar de não serão possível identificar a fonte em 100% dos casos, certamente vale a pena experimentar seu uso 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 é poupado.

Tanto WhatTheFont, como WhatFont, são excelentes identificadores de fontes para se ter à disposição quando surgir a necessidade de identificar fontes para algum trabalho. Aliás, tarefa bem mais comum do que a maioria imagina.

E-book com 10 dicas para montar seu portfolio altamente eficiente e conseguir muito mais clientes e projetos!

Download GRÁTIS