Como identificar fontes de um site

Publicados: 2021-04-22

Você já encontrou a fonte perfeita para o seu site em um site, imagem ou blog diferente, mas não sabia como encontrar seu nome? Você veio ao lugar certo. Neste guia, mostraremos como identificar fontes de um site para ajudá-lo a encontrar a tipografia perfeita para sua empresa.

Por que é útil ver quais fontes um site usa?

Se você está trabalhando na construção de seu site ou projetando seu conteúdo online, está sempre procurando maneiras de melhorá-lo. Você pode fazer isso de várias maneiras. Os mais óbvios são usar um tema diferente, adicionar funcionalidades e fornecer conteúdo melhor. Mas há outras coisas não tão óbvias que você pode fazer para ter uma vantagem sobre seus concorrentes e tornar seu site único. A fonte é uma delas.

A fonte que você usa está em todo o seu site e pode não apenas melhorar a legibilidade , mas também a navegação geral. Se sua tipografia parecer profissional e fácil de ler, é mais provável que seus visitantes permaneçam em seu site. As fontes são muitas vezes esquecidas, mas podem ter um grande impacto.

Mesmo que você possa adicionar fontes ao seu site, você pode querer usar uma tipografia que você não encontra nas formas tradicionais. A internet está cheia de sites com tipografia bonita que você pode querer usar em seu site. No entanto, a parte difícil é identificar as fontes que esses sites usam. Não há uma maneira fácil de encontrar uma fonte e, mesmo se você for um especialista, há muitas diferenças minúsculas em cada fonte. Além disso, essas diferenças podem ser amplificadas por estilos de fonte e alterações de CSS.

É por isso que, neste post, mostraremos como usar diferentes ferramentas para descobrir quais fontes um site usa .

Como identificar fontes de um site

Existem várias maneiras de identificar fontes em um site:

  1. Usando a ferramenta de inspeção
  2. Com plug-ins
    1. FFFFallback
    2. Fonte
    3. Fontanello
    4. Qual fonte

Alguns deles são mais difíceis de usar do que outros e alguns podem exigir ferramentas e extensões externas. Vamos dar uma olhada em todos esses métodos diferentes.

1) Identifique fontes usando a ferramenta Inspecionar

A maneira mais básica de identificar fontes de um site é usar a ferramenta de inspeção do navegador . Para isso, você terá que abrir as ferramentas de desenvolvedor do seu navegador. Normalmente, você pode fazer isso de algumas maneiras diferentes:

  • Pressionando F12 ou Ctrl+Shift+I no seu navegador
  • Abra o menu do navegador clicando com o botão direito do mouse e indo em Inspecionar
  • Abrindo as opções da Developer Tool no menu do navegador e indo para Web Developer

Quando você encontrar uma fonte que você gosta, clique com o botão direito do mouse no texto que contém a fonte que você deseja identificar e clique em Inspecionar Elemento.

Este elemento será destacado na ferramenta do inspetor e você verá os estilos e layouts nas caixas ao lado do inspetor.

Em seguida, clique na guia Computed e role para baixo para verificar o campo Font-Family . Este campo deve listar a fonte do site. Por exemplo, neste exemplo, a fonte é Roboto ou SF-Pro Display.

Dessa forma, você pode identificar fontes em qualquer site usando a ferramenta Inspetor. No entanto, você pode encontrar sites em que não pode clicar com o botão direito do mouse ou acessar a ferramenta de inspeção porque eles não permitem isso. Se for esse o caso, há outra alternativa. Você também pode ver qual fonte o site usa com uma ferramenta dedicada.

Vamos dar uma olhada em alguns dos melhores plugins que você pode usar para identificar fontes de um site.

2) Identifique fontes usando ferramentas e plugins

Se você não pode usar a ferramenta de inspeção em um site, você identifica as fontes usando ferramentas e plug-ins dedicados. Existem várias ferramentas por aí, então, para facilitar sua vida, listaremos as melhores e mostraremos como você pode usá-las para encontrar e reconhecer fontes usadas em diferentes sites.

2.1) FFFFallBack

identificar fontes no site - FFallback

FFFFallback é uma ferramenta simples de bookmarklet que você pode usar para identificar fontes em qualquer site. E a melhor parte é que você não precisa instalar nada. Você simplesmente precisa salvar o bookmarklet em sua guia de favoritos e clicar em seu Favorito em qualquer site para verificar as fontes. A ferramenta usa Javascript para escanear o CSS e identificar a tipografia, bem como seu estilo de fonte.

Para usar esta ferramenta, você precisa abrir esta página. Em seguida, clique no botão FFFFALLBACK e arraste -o para a barra de favoritos, conforme mostrado abaixo. Se a barra de favoritos não for exibida em seu navegador, pressione Ctrl+Shift+B para habilitá-la.

identificar fontes no site - FFFFallback

Agora, abra um site onde você deseja identificar as fontes e clique no Bookmarklet que você acabou de salvar na sua barra de favoritos. Ele deve mostrar a família e o estilo da fonte do site em uma nova coluna, conforme mostrado abaixo. Certifique-se de selecionar Web Font como a opção na parte superior.

Identificar fonte em um site - FFFFallback

2.2) Fonte

identificar fontes no site - fonte

A fonte é semelhante ao FFFFALLBACK, mas também permite verificar as fontes de textos específicos. Dessa forma, você pode especificar para quais textos deseja verificar as fontes.

Para usar o Fount, vá para este site e salve o Bookmarklet de seu site arrastando-o para a guia Favoritos.

identificar fontes no site - bookmarklet de fonte

Em seguida, abra qualquer site para o qual você deseja verificar as fontes e clique no marcador Fonte. Isso mudará seu cursor para um sinal de mais. Basta clicar em qualquer texto e ele mostrará a fonte identificada no canto superior direito da tela.

identificar fontes no site - seletor de fontes

Depois de conhecer a fonte desse texto, você pode clicar na caixa Fonte novamente para desativar o cursor e continuar navegando na página normalmente.

2.3) Fontanelo

identificar fontes no site - imagem fontanello

Se você prefere usar extensões de navegador, Fontanello é a ferramenta perfeita para identificar fontes de qualquer site. Basta instalar a extensão Fontanello no Chrome ou Firefox e ativá-la.

Para identificar fontes em um site, basta clicar com o botão direito do mouse em qualquer texto e selecionar a opção Fontanello . O menu suspenso mostrará a família de fontes, bem como seu estilo e variantes.

identificar fontes no site - clique com o botão direito do fontanello

2.4) Qual Fonte

identificar fontes no site - site whatfont

Como alternativa, você pode usar a extensão WhatFont de maneira semelhante. Primeiro, instale a extensão no Chrome ou Firefox. Em seguida, clique no ícone da ferramenta WhatFont na barra de ferramentas do seu navegador e clique em qualquer texto para verificar sua fonte. O bom é que você pode selecionar textos diferentes e ver qual tipografia eles usam simultaneamente.

Quando terminar, pressione Sair do WhatFont para fechar os pop-ups de fontes e usar a página da Web como de costume.

identificar fontes no site - qual fonte

Agora que vimos como identificar fontes de texto, você pode estar se perguntando se é possível fazer o mesmo a partir de imagens. A resposta é sim! Vamos ver como fazer isso.

Como identificar fontes de uma imagem

Além de descobrir fontes do texto, você também pode identificar fontes de um site por meio das imagens. Para isso, usaremos uma ferramenta online chamada WhatTheFont .

Qual a fonte

identificar fontes no site - qual é o site da fonte

Esta ferramenta online permite que você carregue qualquer imagem, analisa o texto da imagem e informa qual fonte está sendo usada.

Para fazer isso, vá para esta página e arraste ou carregue a imagem na ferramenta (certifique-se de que está no formato JPG ou PNG). texto. Além disso, o WhatTheFont também fornece sites onde você pode comprar as fontes e ainda permite testar as fontes com seu texto personalizado.

Dessa forma, você pode verificar as fontes de imagens ou capturas de tela. Além disso, possui um aplicativo móvel que você também pode usar para identificar fontes do seu celular.

identificar fontes no site - imagem whatthefont

Conclusão

Em suma, a fonte que você usa pode ter um grande impacto no seu site. Ele pode ajudá-lo a melhorar a legibilidade, a navegação geral e a manter seus visitantes por mais tempo. Clareza e legibilidade são aspectos importantes de qualquer site e quanto mais esforço você colocar nele, melhores serão os resultados que você terá.

Neste guia, vimos diferentes maneiras de identificar fontes de um site:

  • Usando a ferramenta de inspeção do navegador
  • Usando ferramentas do Bookmarklet
  • Através de extensões do navegador
  • Usando ferramentas online dedicadas para identificar fontes de imagens

Depois de encontrar as fontes certas, cabe a você escolher como adicioná-las ao seu site. Depois de escolher a tipografia que deseja usar, recomendamos que você dê uma olhada em nosso guia sobre como alterar a fonte no WordPress para mudar para sua nova fonte rapidamente.

Se você está procurando mais maneiras de melhorar a legibilidade e a navegação em seu site WordPress, também pode dar uma olhada nestes artigos:

  • Como adicionar migalhas de pão no WordPress
  • Organize os produtos WooCommerce por marca
  • Como adicionar um mega menu WordPress

Você descobriu novas fontes? Qual método você usou? Deixe-nos saber na seção de comentários abaixo!