Família e pesos carregados
Saber que variantes são precisas, não só o nome
Tipografia
Que fonte usa um site, com a sua licença e a sua escala
O Smart Design Inspector mostra que fontes usa um site, os seus pesos, de onde são carregadas (Google Fonts, Adobe Fonts ou o próprio servidor), a sua licença e a escala tipográfica da página: cada estilo com tamanho, peso e entrelinha.
Fontes, origem, licença e escala: grátis para sempre
Fontes · yourclient.example
- Inter300 · 400 · 500 · 600Google FontsOFL
- Playfair Display400 · 400 itálico · 700Google FontsOFL
- JetBrains Mono400PrópriaOFL
- H164 px · 500 · 1,04
- H236 px · 500 · 1,1
- H317 px · 500 · 1,3
- Corpo16 px · 300 · 1,55
- Botão15 px · 500 · 1
01
Como descobrir que fonte usa um site
3 passos- 01
Instale o Smart Design Inspector e abra o site.
- 02
Clique no ícone e escolha Fontes.
- 03
Vê a lista de famílias com os seus pesos e a sua origem. Passe o cursor sobre um texto para ver o estilo exato.
Sem extensão
Também é possível sem extensão: clique com o botão direito sobre o texto, Inspecionar e procure font-family no painel de estilos. O problema é que font-family indica a fonte que foi pedida, não se foi carregada, de onde vem nem que licença tem.
02
Experimente nesta página
Sem instalarUm site de exemplo e o painel de fontes, sem instalar nada. Passe o cursor sobre um texto, ou escolha-o na lista, e veja a família, o peso, o tamanho, a entrelinha, a origem e a licença.
Escolha um elemento
Smart Design Inspector · Fontesh1.hero-title
- Família
- —
- Peso
- —
- Estilo
- —
- Tamanho
- —
- Entrelinha
- —
- Espaçamento
- —
- Origem
- —
- Licença
- —
Famílias na página
—
Site de exemplo · os valores são lidos desta página
03
Mais do que o nome da fonte
4 dadosOrigem: Google Fonts, Adobe Fonts ou própria
Saber se pode usá-la grátis ou se é preciso comprá-la
Licença
As do Google Fonts são OFL. Nas restantes, é lida a licença declarada na própria fonte
Escala tipográfica
De H1 a H6, corpo e botões com tamanho, peso, entrelinha e espaçamento
A escala é o que é preciso para replicar o estilo, e as extensões de fontes olham letra a letra. Com a Pro, pode exportá-la para Tailwind ou variáveis CSS: extrair o sistema de design.
| Grátis0 €para sempre | Pro49 €pagamento único | |
|---|---|---|
| Fontes da página: família, pesos, tamanhos, origem e licença | ||
| Escala tipográfica: cada estilo de texto com fonte, tamanho, peso, entrelinha e espaçamento | ||
| Exportar os estilos tipográficos para Tailwind v4 @theme, variáveis CSS ou DESIGN_SPECS.md | — | Acesso antecipado grátis |
05
O que não faz
LimitesNão faz o download de fontes pagas. Mostra a licença e onde obtê-las. Se a fonte tiver licença livre, pode fazer o download. Também não identifica fontes a partir de uma imagem: para isso existem ferramentas como o WhatTheFont.
É grátis?
Sim. Ver as fontes, a sua origem, a sua licença e a escala é grátis para sempre.
Reconhece fontes do Adobe Fonts?
Sim. Reconhece as que são carregadas a partir da Adobe pelo endereço de onde vêm.
E se o site usar uma fonte do sistema?
A extensão indica que não é carregada nenhuma fonte web e mostra a família declarada.
Posso usar a fonte que encontrar?
Depende da sua licença. As do Google Fonts podem ser usadas em qualquer projeto. As comerciais têm de ser compradas, mesmo que outro site as use.
Funciona com texto dentro de imagens?
Não. Lê o texto da página, não o que está dentro de uma imagem.
Em que navegadores e sistemas funciona?
No Chrome, Edge, Brave, Arc, Opera e Vivaldi, em Windows, Mac e Linux, desde a 1.0. Funciona da mesma forma em todos porque quem executa a extensão é o navegador, não o sistema. O código está preparado para chegar ao Firefox e ao Safari sem ser reescrito. Enquanto está em desenvolvimento, pode haver alterações.
07
Continue com
Funções relacionadasCores
A paleta da página, conta-gotas e contraste WCAG de cada par de texto e fundo.
Cores de um site →Sistema de design
Cores, espaçamentos e tipografia para Tailwind v4 @theme, variáveis CSS ou DESIGN_SPECS.md.
Extrair o sistema de design →Inspetor CSS
Passe o cursor e veja o CSS calculado, a caixa, as margens e as distâncias.
Inspetor CSS →Lista de espera
Seja dos primeiros a experimentar
O Smart Design Inspector está em desenvolvimento. Deixe o seu email e avisamos no dia em que chegar à Chrome Web Store, com as 7 funções Pro grátis em acesso antecipado.
Um email no dia do lançamento e poucos mais · Cancele com um clique