FontLens

Extensão grátis para Chrome

Que fonte é essa? Clique com o botão direito e veja o CSS

Selecione um texto em qualquer site, clique com o botão direito e escolha “Inspect font with FontLens”. O inspetor de fontes abre sobre a página e mostra família, tamanho, peso, altura da linha e cor, com o CSS pronto para copiar e um botão para baixar a fonte.

Adicionar ao Chrome — grátis

Também funciona no Edge, Brave, Opera e outros navegadores Chromium.

Inspetor FontLens: amostra Ag entre guias de altura das maiúsculas, altura x e linha de base, propriedades da fonte e trecho Tailwind

Resumo rápido

O que faz
Mostra a fonte do texto selecionado: família, tamanho, peso, altura da linha, cor e outros estilos diferentes do padrão, com o CSS pronto para copiar.
Como começar
Selecione o texto, clique com o botão direito e escolha “Inspect font with FontLens”. O item do menu só aparece quando há texto selecionado.
Copiar como
CSS, SCSS, SASS ou Tailwind, com o tamanho em px, rem, pt ou em.
Arquivo da fonte
“Download font” busca a fonte da web pela origem @font-face. Confira a licença antes de usar.
Para quem
Designers web, desenvolvedores front-end, auditores de acessibilidade e estudantes de CSS.
Preço
Grátis. Sem conta e sem versão paga.
Dados
Tudo roda no navegador. Sem servidores nem analytics. A única solicitação é o download da fonte que você inicia.
Compatibilidade
Chrome e outros navegadores Chromium que instalam pela Chrome Web Store. Não funciona no Firefox ou Safari.
Limites
Lê o CSS de texto real em páginas da web. Não lê texto em imagens, canvas ou PDFs, nem nas páginas internas do Chrome.
Versão
2.2.0, atualizada em 23 de outubro de 2026

Dois cliques para descobrir a fonte

  1. 1

    Selecione o texto

    Um título, parágrafo ou rótulo de botão em qualquer página da web.

  2. 2

    Clique com o botão direito

    Escolha “Inspect font with FontLens”. O inspetor abre sobre a página e mostra família, tamanho, peso, altura da linha e cor.

  3. 3

    Copie ou ajuste

    Copie o CSS ou Tailwind, teste outro tamanho ou cor na prévia ao vivo ou baixe o arquivo da fonte.

Por que as pessoas abrem a extensão

Aa

Descubra o nome da fonte

Gostou de um título? Selecione-o para ver a família, o peso e de onde vem a fonte: Google Fonts, Adobe Fonts ou o próprio site.

{ }

Compare com um mockup

Compare os números da página ao vivo com o arquivo de design e copie as regras como CSS, SCSS, SASS ou Tailwind.

4.5:1

Confira o contraste

Veja a taxa de contraste e os indicadores AA e AAA. Antes de publicar, teste um texto mais escuro ou um fundo mais claro.

O que faz

  • Amostra com guias

    A primeira família da pilha, desenhada entre guias de altura das maiúsculas, altura x e linha de base, medidas na própria fonte.

  • formatos de trecho

    CSS, SCSS, SASS e Tailwind. Copie o trecho inteiro ou uma linha; o último formato fica salvo.

  • Suas unidades

    Veja o tamanho em px, rem, pt ou em nos campos e no trecho. rem segue o tamanho raiz da própria página.

  • Origem da fonte

    Um selo mostra de onde vem a fonte: Google Fonts, Adobe Fonts, self-hosted ou uma fonte do sistema já instalada no computador.

  • Verificação de contraste

    Taxa entre texto e fundo com indicadores AA e AAA para texto normal e grande, atualizada quando você muda as cores.

  • Baixe a fonte

    Busca o arquivo na origem @font-face e usa o nome da família. Se o servidor bloquear, a origem abre em uma nova aba.

Por que descobrir “que fonte é essa?” demora no DevTools

Uma página declara uma lista de fontes e o navegador usa a primeira disponível. Para descobrir qual é, você abre o DevTools, encontra o elemento, consulta o painel Computed e procura o arquivo no painel Network. Tamanho, peso, altura da linha e cor ficam em lugares diferentes.

O FontLens lê o estilo calculado do texto selecionado e reúne tudo em um painel: a pilha de famílias, uma amostra da primeira família, os valores, a origem da fonte e o CSS. Ele lê o CSS da página, então não identifica fontes dentro de imagens.

Nada sai do seu navegador

  • Sem conta nem servidores

    FontLens roda no seu navegador. Sem analytics e sem rastreamento.

  • Lê o que você seleciona

    O inspetor lê os estilos do texto em que você clicou com o botão direito. Nada sobre a página é enviado.

  • Quatro permissões

    Menu de contexto para o item do botão direito; aba ativa e acesso à página para abrir o inspetor; armazenamento para seu texto de exemplo, unidade e formato do trecho.

Chrome DevTools e FontLens

Chrome DevTools e FontLensChrome DevToolsFontLens
Encontrar a fonte de um textoInspecione, encontre o elemento e abra ComputedSelecione o texto, clique com o botão direito e escolha um item
Copiar como Tailwind ou SCSSNão, copie os valores um por umAba CSS, SCSS, SASS ou Tailwind
De onde vem a fonteProcure o arquivo no painel NetworkSelo: Google Fonts, Adobe Fonts, self-hosted ou sistema
Baixar o arquivo da fonteEncontre em Network ou Sources e salveUm botão
Verificar contrasteNo seletor de cores do painel StylesIndicadores AA e AAA junto da prévia ao vivo
PreçoIntegradoGrátis

Perguntas Frequentes

Como descubro que fonte um site usa?

Adicione o FontLens ao Chrome, selecione um texto no site, clique com o botão direito e escolha “Inspect font with FontLens”. Você verá a família, o tamanho, o peso, a altura da linha, a cor e a origem da fonte.

Como copio o CSS de uma fonte de um site?

No inspetor, escolha a aba CSS, SCSS, SASS ou Tailwind e pressione “Copy all”, ou copie uma linha. Se precisar, mude antes a unidade para px, rem, pt ou em.

Posso baixar uma fonte de um site?

Quando o texto usa uma fonte da web, “Download font” busca o arquivo na origem @font-face. Uma fonte do sistema não tem arquivo para baixar. Confira a licença antes de usá-la no seu projeto.

O FontLens identifica fontes em imagens ou PDFs?

Não. Ele lê o CSS de texto real em páginas da web, então não identifica fontes em imagens, canvas ou PDFs.

Como verifico o contraste do texto para WCAG?

A prévia mostra a taxa entre a cor do texto e o fundo, com indicadores AA e AAA para texto normal e grande. Mude qualquer uma das cores para atualizar os indicadores.

Dá para mostrar tamanhos em rem em vez de px?

Sim. Escolha px, rem, pt ou em e os campos e o trecho acompanham. rem é calculado a partir do tamanho raiz da página, e sua escolha fica salva.

É grátis? Coleta dados?

É grátis e não exige conta. Não usa servidores nem analytics; a única solicitação é o download da fonte que você inicia.

Funciona no Edge, Brave ou Opera?

A maioria dos navegadores Chromium instala extensões da Chrome Web Store, incluindo Edge, Brave, Opera e Vivaldi. Firefox e Safari não são compatíveis.

Outras extensões grátis da PYROCTAL

Que fonte é essa? Dois cliques.

Adicionar ao Chrome — grátis