Encontrar fontes com Chrome & Firefox DevTools

As DevTools do navegador permitem inspecionar a fonte exata renderizada em qualquer elemento. Veja como usá-las - e quando o scanner de URL é a escolha mais rápida.

Chrome DevTools - Fontes renderizadas

  1. 1Clique com o botão direito em qualquer texto e selecione Inspecionar (ou pressione Ctrl+Shift+I / Cmd+Option+I).
    Menu de contexto do Chrome com Inspecionar destacado em azul
    Ver captura completa
    Clique com botão direito em qualquer texto, depois clique em Inspecionar
  2. 2O Chrome abre o painel Elementos com o elemento clicado já destacado na árvore DOM.
  3. 3No painel direito, clique na aba Calculado (segunda aba, ao lado de Estilos).
  4. 4Role além das propriedades CSS até a seção Fontes renderizadas.
    Aba Calculado do Chrome DevTools mostrando Fontes renderizadas: Inter Variable de um arquivo woff2
    Ver captura completa
    Aba Calculado - role até "Fontes renderizadas" para ver a tipografia ativa
  5. 5Você vê a tipografia exata usada pelo navegador, o arquivo de origem carregado e quantos glifos foram desenhados.

Firefox DevTools - Aba Fontes

  1. 1Clique com o botão direito em qualquer texto e selecione Inspecionar (ou pressione F12). O painel Inspetor abre.
  2. 2No painel direito do Inspetor (onde normalmente vê Regras e Calculado), clique na aba Fontes.
  3. 3A coluna esquerda lista todas as fontes carregadas na página. Clique num nome para ver o espécimen, intervalo de peso, formato e URL de origem.
    Aba Fontes do Firefox DevTools - Inter Variable selecionada, com espécimen e detalhes
    Ver captura completa
    Aba Fontes do Firefox - todas as fontes da página listadas à esquerda, detalhes à direita

Limitações da abordagem DevTools

As DevTools funcionam bem para inspecionar elementos individuais, mas não fornecem um inventário completo de todas as fontes carregadas. Para uma auditoria completa - cole a URL abaixo.

Mais rápido: escanear a página inteira por URL

Cole qualquer URL e obtenha a lista completa de todas as fontes web usadas - cada regra @font-face, importação do Google Fonts e link CDN - em um único scan.

Perguntas frequentes

O que são "Fontes renderizadas" no Chrome?

Fontes renderizadas mostra a tipografia real que o navegador usou para desenhar o texto selecionado - após aplicar os fallbacks de font-family. Pode diferir da declaração CSS font-family.

Por que a fonte renderizada difere de font-family no CSS?

font-family é uma lista de fallbacks priorizada. Se a primeira fonte falhar ao carregar, o navegador passa para o próximo candidato. Fontes renderizadas mostra o que foi realmente usado.

Posso encontrar todas as fontes de uma página com as DevTools?

A aba Fontes do Firefox mostra todas as fontes carregadas. O Chrome requer inspecionar elemento por elemento. Para um inventário completo, use o scanner URL.

O scanner URL também detecta Google Fonts?

Sim - todas as fontes são detectadas: Google Fonts, Bunny Fonts, Fontshare e fontes @font-face auto-hospedadas.

Voltar ao verificador de fontes