O Listar Todas as Fontes analisa qualquer página web e apresenta um inventário completo de cada família de fontes em uso — fontes web carregadas de CDNs, fontes auto-hospedadas e fontes de sistema alternativas. Cada fonte mostra uma pré-visualização de texto ao vivo, os pesos e estilos carregados, o número de elementos que a utilizam e cópia com um clique para a declaração CSS font-family.
Identificar fontes num website que admira costumava exigir a inspeção de elementos um a um nas DevTools, verificando a propriedade font-family computada, ou usando extensões de navegador que apenas detetam uma fonte de cada vez. O Listar Todas as Fontes dá-lhe a imagem completa numa única vista — cada fonte carregada e utilizada na página, com amostras de texto ao vivo que mostram exatamente como cada fonte é renderizada. A ferramenta diferencia entre fontes web (carregadas via @font-face ou Google Fonts) e fontes de sistema (Arial, Helvetica, Georgia, etc.), mostrando a pilha completa de font-family. Para cada fonte, vê quais os pesos carregados (400, 600, 700), quais os elementos que a utilizam e que tamanhos de fonte são aplicados. Clique em qualquer fonte para copiar a sua declaração CSS — pronta para colar no seu próprio projeto. A pré-visualização ao vivo utiliza a renderização real da fonte da página, não uma pré-visualização genérica, para que veja exatamente como a fonte se parece nos tamanhos e pesos utilizados no site.
Lista cada família de fontes realmente renderizada na página, incluindo fontes web do Google Fonts, Adobe Fonts ou declarações @font-face personalizadas, e fontes de sistema alternativas. Mostra a contagem total de famílias de fontes únicas encontradas.
Cada fonte é exibida com uma amostra de texto ao vivo ("The quick brown fox jumps over the lazy dog") renderizada usando o ficheiro de fonte real carregado na página. Vê a renderização real — não uma pré-visualização genérica.
Para cada fonte, veja quais os pesos carregados (Regular 400, Medium 500, SemiBold 600, Bold 700) e se as variantes em itálico estão disponíveis. Ajuda-o a compreender o subconjunto carregado da fonte.
Veja quantos elementos na página utilizam cada fonte. A fonte mais utilizada é listada primeiro. Saiba quais as fontes primárias (texto do corpo) e quais as secundárias (utilizadas em apenas alguns elementos).
Clique em qualquer entrada de fonte para copiar a sua declaração CSS font-family completa (ex: font-family: 'Inter', sans-serif) para a sua área de transferência. Pronta para colar diretamente na sua folha de estilos.
Cada fonte mostra a sua origem: Google Fonts (com o URL específico), Adobe Fonts, auto-hospedada (com o URL @font-face) ou fonte de sistema. Saiba exatamente de onde vem cada fonte.
Visite um website com uma tipografia bonita e veja instantaneamente cada fonte que utiliza — nomes, pesos e de onde vêm. Acabaram-se as adivinhas de "que fonte é esta?" ou o uso de ferramentas de identificação de fontes pouco fiáveis.
Quantas fontes carrega a sua página? Existem fontes não utilizadas a serem descarregadas mas não aplicadas? O Listar Todas as Fontes mostra a utilização real — se uma fonte carregada tem 0 elementos a utilizá-la, é largura de banda desperdiçada.
Documente a tipografia do seu projeto executando o Listar Todas as Fontes em cada página. Verifique se as fontes e pesos corretos são utilizados consistentemente em todo o site — detete declarações font-family indesejadas.
Identificou uma fonte de que gosta mas é uma fonte paga? Copie o nome da fonte e procure alternativas gratuitas com características semelhantes. A pré-visualização ao vivo ajuda-o a lembrar-se exatamente de como ela era.
Execute o Listar Todas as Fontes na mesma página em diferentes navegadores para verificar se as mesmas fontes são renderizadas em todo o lado. As pilhas de fontes de sistema resolvem-se de forma diferente entre sistemas operativos — detete inconsistências.
Abra a doca flutuante do DevSuite Pro e clique no ícone Listar Todas as Fontes. A ferramenta analisa os estilos computados da página e as regras @font-face.
Um painel exibe todas as fontes encontradas na página, ordenadas pela frequência de utilização. Cada entrada mostra o nome da fonte, texto de pré-visualização, pesos e contagem de elementos.
Percorra as pré-visualizações ao vivo para ver como cada fonte renderiza. Compare a fonte de título da página vs fonte de corpo vs fonte de destaque.
Clique em qualquer entrada de fonte para copiar a sua declaração CSS font-family. Clique no link de origem para visitar a origem da fonte (página do Google Fonts, URL da CDN, etc.).
Cole a declaração font-family no seu CSS e carregue a fonte da mesma origem para a utilizar no seu próprio projeto.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 39 ferramentas de desenvolvedor para seu navegador.
