Como encontrar a fonte de uma página da web usando a ferramenta Inspecionar elemento e as extensões do navegador

O sucesso do seu site depende muito de sua aparência. Ter a combinação de cores e o tema corretos manterá os visitantes em seu site por um pouco mais de tempo. Além da paleta de cores e da estrutura do seu site, a fonte escolhida também desempenha um papel essencial para manter o público envolvido.

Talvez você encontre um site atraente enquanto navega na web e deseja saber quais fontes ele está usando. Com as extensões online e a ferramenta Inspect Element integrada do seu navegador, a identificação de uma fonte é rápida e fácil.

Caso você não saiba, a ferramenta Inspect Element integrada do seu navegador permite que você examine o código-fonte de um site. Você pode compreender os elementos de design de um site observando seu CSS, HTML e outras informações. É uma ótima maneira de obter inspiração ao projetar seu próprio site.

O processo de identificação de uma fonte usando a ferramenta Inspecionar Elemento é bastante simples e você não precisará de nenhuma habilidade de codificação. Esta ferramenta está disponível em todos os navegadores do mercado e cada um possui um layout semelhante.

Veja como identificar uma fonte usando a ferramenta Inspecionar do seu navegador.

1. Abra o site que deseja usar.
2. Realce o texto que contém a fonte que você deseja identificar e clique com o botão direito nele.
3. Clique em Inspecionar no menu de contexto.
4. Quando o menu Inspecionar abrir, clique no Computado.
5. Role para baixo para encontrar o Família de fontes seção. Aqui, você pode encontrar o nome e o estilo da fonte, bem como suas dimensões.

Se você deseja uma maneira mais rápida de encontrar a fonte de um site usando a ferramenta Inspecionar, tente o seguinte:

1. Abra o site que deseja usar.
2. Aperte Ctrl + Shift + C (Cmd + Shift + C no Mac).
3. Passe o mouse sobre o texto para exibir o estilo, tamanho, código de cor e margem da fonte.

Você também pode verificar a lista de fontes usadas em uma página da Web usando a ferramenta Inspecionar. Veja como fazer isso:

1. Vá para a página da web.
2. Abra o código-fonte pressionando Ctrl + Shift + I (Cmd + Shift + I no Mac).
3. Clique no Rede guia e, em seguida, selecione o Fonte aba.
4. Aqui, você verá uma lista de todas as fontes usadas na página da web.

Para obter a lista de todas as fontes em tempo real, pode ser necessário atualizar a página da web.

Relacionado: Como aumentar ou diminuir o tamanho da fonte no Firefox

Como identificar fontes usando extensões do navegador

Se você deseja uma maneira mais conveniente de identificar uma fonte, pode instalar uma extensão de navegador para localização de fontes. Embora existam várias extensões de navegador que podem ajudar a detectar fontes na web, as duas mais populares são WhatFont e Font Finder.

Vamos dar uma olhada no processo de identificação de fontes usando ambas as extensões.

1. WhatFont

WhatFont é amplamente popular para detectar rapidamente várias fontes ao mesmo tempo. Veja como usar essa ferramenta.

1. Quando WhatFont está habilitado em seu navegador, passe o mouse sobre o texto para mostrar sua fonte.
2. Depois de clicar no texto, uma janela pop-up aparecerá com o restante dos detalhes da fonte, como tamanho, cor e estilo da fonte.
3. Além disso, você pode selecionar várias seções de texto simultaneamente para comparar fontes diferentes na mesma página.

Download: WhatFont para cromada | Raposa de fogo | Safári (Livre)

2. Font Finder

Font Finder também exibe detalhes da fonte quando você passa o mouse sobre qualquer texto em um site. No entanto, ele fornece muitos detalhes técnicos, então pode ficar um pouco confuso se você não estiver familiarizado com web design.

Dito isso, o Font Finder é mais adequado para desenvolvedores da web que desejam substituir as fontes existentes por novas em tempo real. Isso torna mais fácil testar as fontes antes de fazer qualquer alteração permanente.

Veja como testar uma fonte usando o Font Finder:

1. Destaque uma parte do texto da página da web.
2. Clique com o botão direito e selecione Font Finder no menu de contexto.
3. Selecione Substituir fonte por e insira o nome da fonte. Vamos adicionar Calibri e veja como ele muda a fonte na visualização.
4. Se você deseja redefinir a fonte, atualize a página.

Download: FontFinder para cromada | Borda | Raposa de fogo (Livre)

Que tal verificar a fonte em uma imagem?

Se você deseja identificar as fontes em uma imagem, as extensões do navegador e a ferramenta Inspecionar do seu navegador podem não ajudar. No entanto, você pode tentar ferramentas de inspetor de imagens online, como WhatFontIs, FontSquirrel, Fontspring, WhatTheFont, e muitos outros.

O processo de identificação de uma fonte de uma imagem é basicamente o mesmo em todas as ferramentas. Vamos tentar identificar a fonte em uma imagem usando WhatTheFont.

1. Se ainda não o fez, baixe a imagem que deseja usar.
2. Importe a imagem para WhatTheFont.
3. WhatTheFont detectará automaticamente o texto em sua imagem. Reduza ou aumente a caixa de corte de modo que contorne a fonte que você deseja identificar. Acerte o botão de seta quando terminado.
4. WhatTheFont irá então combinar a fonte na imagem com as fontes em sua galeria, e irá mostrar a você fontes intimamente relacionadas.
5. Se você não encontrar uma boa correspondência imediatamente, você pode continuar clicando Mostrar mais resultados para ver mais fontes relacionadas.

Relacionado: Os melhores sites de fontes grátis para fontes online grátis

Detecte fontes da web e use-as em seus designs

As fontes desempenham um papel significativo no sucesso de um site ou design gráfico. Se você se deparar com uma fonte atraente ao navegar na web, poderá detectá-la facilmente usando os métodos acima.

WhatTheFont e 4 alternativas para encontrar fontes em imagens

Quer encontrar fontes de imagens? Existem ferramentas online que podem fazer isso por você, incluindo WhatTheFont e várias alternativas.

Leia a seguir

Sobre o autor