Ferramenta gratuita, sem cadastro

Qual é a fonte deste site?

Cole uma URL para ver as fontes que um site usa, com pesos, tamanhos e onde cada uma aparece. Grátis, sem cadastro. Veja exemplos prontos como as fontes da Anthropic e as fontes do Airbnb, ou descubra o que um DESIGN.md acrescenta.

Experimente

Use essas fontes no seu código

A ferramenta mostra os nomes das famílias, os pesos e onde cada uma é usada. Para reutilizá-las, carregue cada família uma vez, dê a cada papel uma variável CSS e sempre termine a pilha com fontes de reserva, para que o texto apareça enquanto a fonte baixa ou se ela não carregar.

1. Carregue a fonte. Para uma família do Google Fonts, adicione a tag <link> dela ou use next/font/google, e peça só os pesos que a ferramenta listou. Para uma fonte comercial, compre uma licença web da fundição e sirva os arquivos com @font-face.

2. Dê nome aos papéis. Uma variável por função: display para títulos, body para o texto corrido, mono para código. Troque os nomes das famílias pelos que você encontrou.

:root {
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
body { font-family: var(--font-body); font-weight: 400; }
code, pre { font-family: var(--font-mono); }

3. Use no Tailwind. As mesmas pilhas viram os utilitários font-display, font-sans e font-mono.

/* app.css, Tailwind CSS v4 */
@theme {
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

As famílias são metade de um sistema tipográfico. Os tamanhos, as alturas de linha e o espaçamento entre letras de cada nível ficam na seção de tipografia de um DESIGN.md, que o seu agente de código consegue aplicar em todas as telas.

FAQ

Perguntas sobre o identificador de fontes

Respostas curtas sobre o Identificador de fontes de sites gratuito.

Ele abre a página em um navegador de verdade e lê a fonte computada de cada trecho de texto visível: a família que o navegador realmente renderizou, mais o peso e o tamanho. Depois, as famílias são agrupadas e ordenadas pela quantidade de texto que cada uma ocupa.

Não. Fontes são software licenciado, e a licença de um site normalmente vale só para aquele site. Se a família estiver no Google Fonts, você pode baixá-la lá de graça; caso contrário, procure a fundição e compre uma licença para o seu próprio uso.

Ele lê só a página que você informa e lista até oito famílias. Ele só vê o texto que essa página mostra para um visitante novo: texto atrás de login, páginas que bloqueiam navegadores automatizados e letras desenhadas como imagens ou SVG não são lidos, então as fontes deles não aparecem.

Sim. Qualquer fonte web que a página renderiza é identificada, venha ela do Google Fonts, do Adobe Fonts ou dos servidores do próprio site. As fontes do Google aparecem na prévia com o desenho real; as outras são mostradas com uma fonte de reserva.

Sim, um elemento por vez. No Chrome ou no Edge, clique com o botão direito no texto, escolha Inspecionar e role a aba Computado até Fontes renderizadas, que mostra a fonte que foi realmente desenhada. No Firefox, o painel Fontes do Inspetor lista as fontes do elemento selecionado e todas as fontes que a página carregou.

Esta ferramenta lista só as fontes. Um DESIGN.md do Design Extractor cobre as cores, a escala tipográfica completa, o espaçamento e as regras de componentes de um site, em um único arquivo que o seu agente de código consegue seguir.

Mais ferramentas gratuitas

Ver todas as ferramentas gratuitas

Precisa do sistema de design completo?

Receba um DESIGN.md com as cores, a escala tipográfica, o espaçamento e os componentes de qualquer site, pronto para o seu agente de código.

Gerar um DESIGN.md