Qual fonte este site usa?
Dá para descobrir de dois jeitos: perguntar às ferramentas de desenvolvedor do navegador sobre um trecho de texto, ou deixar uma extensão ler a página inteira. Os dois estão abaixo.
Com o DevTools do Chrome ou do Edge (grátis, um elemento por vez)
- Clique com o botão direito no texto e escolha Inspecionar.
- No painel, abra a aba Computed (Computado) e role até o fim.
- Rendered Fonts (fontes renderizadas) mostra a fonte que o navegador realmente desenhou, por exemplo
Manrope (network resource). A linhafont-familymais acima só mostra o que o site pediu, que pode ser uma lista de alternativas.
É exato, e basta quando você só quer saber de um título. Fica lento quando você quer o quadro completo: títulos, texto, botões, código e quais pesos estão em uso.
Com o Stylasso (a página inteira de uma vez)
Clique no ícone e o Stylasso lista todas as fontes que a página renderiza, com a função de cada uma (títulos, texto, monoespaçada), os pesos em uso, de onde ela é carregada (Google Fonts, Adobe Fonts, hospedada no próprio servidor ou fonte do sistema) e uma amostra desenhada nessa fonte. Ele rodou em três sites de demonstração que criamos:
- Northwind RoastersHanken Grotesk, texto, pesos 400, 500, 600Northwind Roasters (cafeteria), do Google Fonts
- Northwind RoastersFraunces, títulos, pesos 600Northwind Roasters (cafeteria), do Google Fonts
- Northwind RoastersJetBrains Mono, mono, pesos 400Northwind Roasters (cafeteria), do Google Fonts
- LedgerlineManrope, títulos e texto, pesos 400, 500, 600, 800Ledgerline (fintech), do Google Fonts
- AfterhoursSpace Grotesk, títulos e texto, pesos 400, 500, 700Afterhours (ferramenta para devs, escura), do Google Fonts
A escala tipográfica vem junto: cada tamanho de título e de texto com peso, altura de linha e espaçamento entre letras, com os nomes dos passos do Tailwind.
Quando a fonte não é grátis
Se um site usa uma fonte comercial, provavelmente o seu projeto não tem licença para ela. O Stylasso marca essas fontes e indica a fonte grátis do Google mais parecida, e as exportações de CSS, Tailwind e DESIGN.md carregam essa alternativa grátis com um comentário, para que o que você construir fique parecido e continue legal.
Perguntas
Por que o DevTools mostra uma fonte diferente da que está no CSS?
O CSS lista, em ordem, o que o site gostaria de usar. Se a primeira fonte não carrega ou não tem algum caractere, o navegador passa para a próxima. O Rendered Fonts do DevTools e o Stylasso mostram o que foi realmente desenhado.
Posso baixar os arquivos da fonte?
O Stylasso não exporta arquivos de fonte; eles pertencem ao dono da fonte. Ele informa o nome e a origem para você conseguir a fonte do jeito certo, muitas vezes de graça no Google Fonts.
Funciona com texto dentro de imagens?
Não. Ele lê texto de verdade em páginas web. Para uma fonte dentro de uma imagem ou de um logo, o ideal é um serviço de identificação de fontes que compare formatos.