Como descobrir qual fonte um site está usando

Você entra em um site e a fonte do título te para na hora. É exatamente aquele clima que você vem tentando alcançar no seu próprio site há semanas. Você clica com o botão direito, tenta "inspecionar" e cai numa parede de CSS onde precisa vasculhar só para achar uma linha de font-family — se é que consegue achar.

Os jeitos comuns de descobrir uma fonte, e por que eles são chatos

As ferramentas de desenvolvedor do navegador funcionam, tecnicamente, mas foram feitas para devs debugando layout, não para uma checagem rápida de nome de fonte. Você precisa abrir o inspetor, clicar no elemento certo dentro de uma árvore cheia de camadas, rolar pelos estilos computados e torcer para a fonte não estar escondida atrás de meia dúzia de variáveis CSS e fontes de fallback. Existem também sites de identificação de fonte, mas a maioria pede pra você mandar um print e depois adivinhar entre uma lista de correspondências parecidas visualmente — lento, e muitas vezes errado.

Bom saber: existe um jeito bem mais rápido que pula essas duas abordagens por completo — passe o mouse sobre o texto e tenha a resposta na hora, sem print e sem aba de ferramentas de desenvolvedor.

A solução: FontMee

FontMee é uma extensão gratuita do Chrome feita exatamente para isso. É um painel lateral que abre ao lado de qualquer página, com duas coisas que importam aqui: uma ferramenta de Inspecionar que nomeia qualquer fonte na hora, e uma biblioteca ao vivo com mais de 1900 fontes que você pode aplicar naquela mesma página para ver como outra coisa ficaria — não só identificar o que já está ali, mas realmente testar alternativas antes de decidir qualquer coisa.

Como identificar uma fonte — passo a passo

1. Instale o FontMee. Adicione o FontMee pela Chrome Web Store. Grátis, sem precisar de conta.
2. Abra o painel na página desejada. Clique no ícone do FontMee e o painel lateral abre ao lado do site.
3. Clique em Inspecionar e passe o mouse sobre o texto. A família da fonte exata, tamanho, peso, espaçamento entre linhas e espaçamento entre letras que estão sendo exibidos aparecem instantaneamente — sem ferramentas de desenvolvedor, sem código-fonte.

Também é um testador de fontes ao vivo, não só um identificador

Depois de descobrir qual fonte uma página está usando, o verdadeiro valor do FontMee entra em cena: o mesmo painel deixa você testar qualquer uma das mais de 1900 fontes — todo o catálogo do Google Fonts mais exclusividades da Fontshare como Satoshi e Clash Display — direto naquela página ao vivo, no seu próprio navegador, na hora.

• Quatro camadas independentes — aplique uma fonte em tudo, só nos títulos, só no corpo do texto, ou em um elemento específico que você clicar, cada uma mantendo sua própria escolha
• Mire em um elemento específico — aponte exatamente para um botão, título ou parágrafo em vez da página toda
• CSS pronto para copiar — depois de encontrar o que você gosta, um clique gera o @import e as regras prontas para colar na sua própria folha de estilo
• Importe suas próprias fontes (Pro) — traga as fontes de marca de um cliente ou fontes que você comprou e visualize ao vivo do mesmo jeito

Nada do que você faz toca no site em si — recarregue a página ou feche a aba e tudo volta ao normal para você e para qualquer outra pessoa. É um jeito totalmente seguro de testar "e se fosse outra fonte" no seu próprio site antes de escrever uma linha de CSS, ou no site de outra pessoa só para ver como uma fonte ficaria.

Como conseguir a extensão

O FontMee é grátis, com mais de 1900 fontes, as quatro camadas, Inspecionar e Copiar CSS incluídos sem custo. Se você passa tempo escolhendo fontes — para o seu próprio site, para um cliente, ou só por curiosidade sobre uma página que você gosta — isso transforma o "chute" em algo que você realmente consegue ver.

Perguntas frequentes