Como descobrir a fonte usada em um site: 4 métodos práticos

Escolha a forma certa de encontrar uma fonte de site

A busca pela fonte usada em uma página pode significar duas coisas. Você pode estar olhando para um texto selecionável em um site ativo ou para uma captura em que as letras já fazem parte de uma imagem. Comece por este mapa:

Primeiro veja se o texto do site está ativo

Tente selecionar uma palavra com o mouse ou teclado. Se ela puder ser destacada, copiada ou pesquisada, provavelmente é texto HTML ativo. Nesse caso, o navegador tem acesso ao elemento, aos estilos calculados e à pilha de fontes escolhida pela página.

Se não for possível selecionar as palavras porque elas estão dentro de uma imagem, logotipo, canvas ou anúncio achatado, trate a amostra como uma imagem. Um método para texto ativo pode mostrar a fonte do contêiner e ignorar a tipografia dentro do recurso visual.

Observe também mudanças responsivas. Um título no desktop pode usar outra família ou peso no celular. Verifique o elemento e a largura de tela que correspondem ao design que você quer reproduzir.

Use uma extensão para texto de uma página ativa

Uma extensão para encontrar fontes costuma ser a opção mais rápida quando você está pesquisando um site ativo e não precisa de uma auditoria completa de CSS. Ela identifica o elemento sob o cursor e pode mostrar família, tamanho, peso e cor.

1. Abra a página com a tipografia desejada e espere o conteúdo terminar de carregar.
2. Ative uma extensão confiável de inspeção de fontes e passe o cursor sobre o título, menu, botão ou parágrafo exato.
3. Anote a família e o peso, e não somente a categoria geral, como serif ou sans serif.
4. Repita o teste em outro elemento. Famílias diferentes podem indicar uma combinação planejada para títulos e texto corrido.

Para comparar extensões e limitações, leia o Guia de extensões para encontrar fontes. Ele também explica quando uma captura é a melhor opção.

Confirme a fonte com o DevTools do navegador

O DevTools é melhor quando você precisa de evidências para um redesign, auditoria de CSS, revisão de acessibilidade ou tarefa de implementação. Ele permite inspecionar o elemento escolhido, em vez de depender apenas de um rótulo visual.

1. Clique com o botão direito no texto e escolha Inspecionar, ou abra o DevTools e use o seletor de elementos.
2. Em Styles ou Computed, encontre font-family e anote a ordem completa dos fallbacks.
3. Confira font-size, font-weight, line-height, letter-spacing e text-transform, pois essas propriedades mudam a aparência.
4. Se o navegador mostrar as fontes renderizadas, compare-as com a pilha declarada e registre se um fallback foi usado.

Para o fluxo técnico do navegador, consulte a documentação oficial do Documentação de inspeção CSS do Chrome DevTools.

Encontre uma fonte a partir de uma captura do site

Um detector de fontes por captura é ideal quando você não consegue inspecionar a página original, quando o texto está dentro de uma arte ou quando o design foi compartilhado como uma imagem achatada. Também ajuda quando o site muda antes de você voltar a ele.

Recorte a amostra ao redor de um único estilo. Uma linha nítida de título ou botão oferece formas de letras mais úteis do que uma página inteira com várias famílias, ícones, fotos e textos pequenos.

• Use texto nítido: Escolha um recorte claro com letras suficientes para comparar formas repetidas como a, e, g, R e t.
• Mantenha um estilo: Não misture um título em negrito com um parágrafo leve se quer identificar uma só família.
• Espere uma correspondência provável: Fontes personalizadas ou modificadas podem gerar uma alternativa próxima em vez do original garantido.

Se você já tem uma captura, abra o Abrir Website Font Detector para comparar as formas visíveis e ver sugestões semelhantes.

Erros comuns ao identificar fontes de sites

O nome de uma fonte sozinho não basta para reproduzir um design. Estes casos explicam por que duas ferramentas podem discordar:

• Fontes de fallback: A primeira opção declarada pode não ser a fonte renderizada pelo navegador.
• Pesos variáveis: Uma fonte variável pode parecer diferente em vários pesos ou tamanhos ópticos.
• Texto em imagem: O DevTools não consegue inspecionar letras rasterizadas em banner, logo ou canvas.
• Componentes misturados: Um sistema de design pode usar uma família em títulos, outra na interface e outra em artes de marketing.
• Licenças: Identificar uma fonte não dá permissão para baixá-la ou usá-la comercialmente. Confira os termos da licença.

Quando a precisão importa, guarde uma pequena evidência: URL ou captura, elemento inspecionado, família declarada, família renderizada se disponível e a correspondência visual mais próxima.

Transforme o resultado em uma decisão útil

Use DevTools ou uma extensão quando precisar da pilha técnica de uma fonte em HTML ativo. Use uma captura para estudar banner, logo, visualização móvel ou design salvo. A resposta mais confiável costuma vir de combinar o método com a evidência que você tem.

Depois de encontrar uma família provável, compare as mesmas letras com o mesmo peso e tamanho e confirme a licença antes de usá-la em um projeto de cliente, produto ou site público.