FontLens

Extensão gratuita para Chrome

Que tipo de letra é? Clique com o botão direito e veja o CSS

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

Adicionar ao Chrome — grátis

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

O inspetor FontLens: amostra Ag entre guias de altura das maiúsculas, altura x e linha de base, propriedades do tipo de letra e snippet Tailwind

Em resumo

O que faz
Mostra o tipo de letra do texto selecionado: família, tamanho, peso, altura da linha, cor e outros estilos diferentes do predefinido, com o CSS pronto a copiar.
Como começar
Selecione 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.
Ficheiro da fonte
“Download font” procura a fonte web na origem @font-face. Consulte a licença antes de a usar.
Para quem
Designers web, programadores front-end, auditores de acessibilidade e estudantes de CSS.
Preço
Grátis. Sem conta e sem versão paga.
Dados
Funciona no browser. Sem servidores nem analytics. O único pedido é a transferência da fonte que iniciar.
Compatibilidade
Chrome e outros browsers Chromium que instalam a partir da Chrome Web Store. Não funciona no Firefox nem no Safari.
Limites
Lê o CSS de texto real em páginas web. Não lê texto em imagens, canvas ou PDFs, nem nas páginas internas do Chrome.
Versão
2.2.0, atualizado a 23 de outubro de 2026

Dois cliques até ao tipo de letra

  1. 1

    Selecione texto

    Um título, um parágrafo ou o rótulo de um botão em qualquer página 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 CSS ou Tailwind, experimente outro tamanho ou cor na pré-visualização em direto ou transfira o ficheiro da fonte.

Porque é que as pessoas o abrem

Aa

Descubra o nome do tipo de letra

Viu um título de que gosta? Selecione-o para ver a família, o peso e a origem da fonte: Google Fonts, Adobe Fonts ou o próprio site.

{ }

Compare com um mockup

Compare os valores da página em direto com o ficheiro de design e copie as regras como CSS, SCSS, SASS ou Tailwind.

4.5:1

Verifique o contraste

Consulte o rácio de contraste e os indicadores AA e AAA. Experimente texto mais escuro ou um fundo mais claro antes de publicar.

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 snippet

    CSS, SCSS, SASS e Tailwind. Copie o snippet completo ou uma linha; o último formato fica memorizado.

  • As suas unidades

    Veja o tamanho em px, rem, pt ou em nos campos e no snippet. rem acompanha o tamanho root da própria página.

  • Origem da fonte

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

  • Verificação do contraste

    Rácio entre texto e fundo com indicadores AA e AAA para texto normal e grande, atualizado quando altera as cores.

  • Transfira a fonte

    Obtém o ficheiro na origem @font-face e atribui-lhe o nome da família. Se o servidor bloquear o acesso, a origem abre num novo separador.

Porque “que tipo de letra é?” demora no DevTools

Uma página declara uma lista de fontes e o browser usa a primeira que tiver disponível. Para descobrir qual, abre o DevTools, encontra o elemento, consulta o painel Computed e depois procura o ficheiro no painel Network. Tamanho, peso, altura da linha e cor estão em sítios diferentes.

O FontLens lê o estilo calculado do texto que selecionou e reúne tudo num painel: a pilha de famílias, uma amostra da primeira família, os valores, a origem da fonte e o CSS. Lê o CSS da página, por isso não consegue identificar uma fonte dentro de uma imagem.

Nada sai do seu browser

  • Sem conta nem servidores

    O FontLens funciona no seu browser. Sem analytics nem rastreio.

  • Lê o que seleciona

    O inspetor lê os estilos do texto em que clicou com o botão direito. Não é enviada qualquer informação sobre a página.

  • Quatro permissões

    Menu de contexto para o item do clique direito; separador ativo e acesso à página para abrir o inspetor; armazenamento para o texto de exemplo, unidade e formato do snippet.

Chrome DevTools e FontLens

Chrome DevTools e FontLensChrome DevToolsFontLens
Encontrar o tipo de letra de um textoInspecione, encontre o elemento e abra ComputedSelecione o texto, clique com o botão direito, um item do menu
Copiar como Tailwind ou SCSSNão, copie os valores um a umSeparador CSS, SCSS, SASS ou Tailwind
Origem da fonteProcure o ficheiro da fonte no painel NetworkIndicador: Google Fonts, Adobe Fonts, self-hosted ou sistema
Transferir o ficheiro da fonteEncontre em Network ou Sources e guardeUm botão
Verificação do contrasteNo seletor de cores do painel StylesIndicadores AA e AAA junto à pré-visualização em direto
PreçoIncluídoGrátis

Perguntas frequentes

Como descubro que tipo de letra um site usa?

Adicione o FontLens ao Chrome, selecione texto no site, clique com o botão direito e escolha “Inspect font with FontLens”. 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 o separador CSS, SCSS, SASS ou Tailwind e prima “Copy all”, ou copie uma única linha. Se precisar, mude primeiro a unidade para px, rem, pt ou em.

Posso transferir uma fonte de um site?

Quando o texto usa uma fonte web, “Download font” obtém o ficheiro na origem @font-face. Uma fonte de sistema não tem ficheiro para transferir. Consulte a licença antes de a usar no seu projeto.

O FontLens identifica uma fonte numa imagem ou PDF?

Não. Lê o CSS de texto real em páginas web, por isso não identifica fontes em imagens, canvas ou PDFs.

Como verifico o contraste do texto segundo a WCAG?

A pré-visualização mostra o rácio entre a cor do texto e o fundo, com indicadores AA e AAA para texto normal e grande. Altere qualquer cor para atualizar os indicadores.

Pode mostrar os tamanhos em rem em vez de px?

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

É grátis? Recolhe dados?

É grátis e não precisa de conta. Não usa servidores nem analytics; o único pedido é a transferência da fonte que iniciar.

Funciona no Edge, Brave ou Opera?

A maioria dos browsers Chromium instala extensões da Chrome Web Store, incluindo o Edge, Brave, Opera e Vivaldi. Não é compatível com o Firefox e o Safari.

Mais extensões gratuitas da PYROCTAL

Que tipo de letra é? Dois cliques.

Adicionar ao Chrome — grátis