Como posso saber quais fontes um site está usando?

Como posso descobrir qual fonte ou fontes um site está usando? Existem ferramentas ou extensões de navegador que podem facilitar o trabalho?

Opção 1: use uma extensão do navegador (Fácil)

Extensões como o WhatFont (disponível para Chrome, Firefox e Safari) facilitam bastante a detecção de famílias de fontes de qualquer texto em uma página da web. Você só precisa instalar a extensão, ativá-la em um site e clicar no elemento que deseja inspecionar. Os resultados são mostrados em uma caixa flutuante, sempre no contexto de sua escolha.

Opção 2: verificar manualmente o CSS com inspetores do navegador (avançado)

A maioria dos navegadores permite que você encontre facilmente as fontes usando right-click→ 'Inspecionar' ou 'Inspecionar elemento'. Isso também pode ser feito pressionando F12. Isso mostrará uma lista de estilos anexados ao site, que você pode explorar para encontrar as fontes usadas em qualquer elemento HTML.

O uso do inspetor não é tão simples quanto o uso de uma extensão, mas possui várias vantagens. É necessário algum entendimento de CSS, pois geralmente você precisará passar por vários estilos para encontrar o que está sendo aplicado. Como regra geral, os estilos riscados estão sendo substituídos; portanto, sempre procure os que estão sendo aplicados por último.

Todos os estilos da página são listados na guia Estilo , mas se você usar a guia Computado , poderá encontrar as propriedades que são ativamente aplicadas ao elemento que você selecionou, incluindo, obviamente, a família de fontes.

Finalmente, outra maneira de verificar rapidamente quais fontes estão sendo usadas globalmente (mas NÃO como ou onde) é ir para 'Aplicativo → Quadros → Fontes' . Lá, você encontrará uma lista de todas as fontes referenciadas (não pertencentes ao sistema).

Esse segundo método é mais lento, mas o uso do inspetor pode fornecer uma ótima visão da maneira como a página inteira é criada. Além disso, muitos designers e desenvolvedores o usam como uma ferramenta para testar alterações antes de realmente escrevê-las na folha de estilo (porque alterar uma linha CSS no inspetor aciona uma visualização em tempo real no navegador).

O "elemento de inspeção" do navegador não é perfeito

O uso das ferramentas de desenvolvedor do seu navegador é uma boa maneira de ver quais fontes são declaradas no CSS de um site. Porém, isso não mostra qual fonte está sendo renderizada - apenas mostra a pilha de fontes sendo aplicada - a fonte real sendo renderizada pode variar dependendo das fontes instaladas etc.

Outra ferramenta útil é o Fount .

O Fount lhe dirá qual fonte da Web na sua pilha de fontes você está realmente vendo - e não apenas o que deve ser visto. Também informará o tamanho, o peso e o estilo da fonte.

Usar o Fount é tão fácil quanto adicionar um marcador. Não há necessidade de instalar um aplicativo ou qualquer extensão.

Depois de adicionar o marcador:

1. Vá para qualquer site e clique no bookmarklet Fount.
2. Clique em qualquer tipo que você deseja identificar. Repetir.
3. Para desativar o Fount, basta clicar no bookmarklet novamente.

O Fount funciona no Safari, Chrome, Firefox e IE8 +.

Adoro a extensão CSSViewer do navegador Chrome . Você apenas clica e passa o mouse sobre a fonte que deseja identificar e mostra a família de fontes.

O FontFinder foi criado para designers, desenvolvedores e tipógrafos. Ele permite que o usuário analise as informações da fonte de qualquer elemento da página, copie qualquer parte dessas informações para a área de transferência e execute substituições em linha para testar novos layouts.

Este complemento é o melhor para encontrar a fonte e outros css, como peso, tamanho e muitas outras páginas da web.