Como descobrir a fonte de um site pelo navegador
Descubra que fonte um site usa em poucos cliques, pelas ferramentas de desenvolvedor do Chrome, Firefox ou Safari, e o que fazer quando o texto é imagem.
Num site, a fonte quase nunca é um mistério de verdade: o navegador precisa saber o nome dela para desenhar o texto, e você pode perguntar a ele. Não é preciso instalar nada. As ferramentas de desenvolvedor, que já vêm em todo navegador de computador, mostram a fonte de qualquer trecho em menos de um minuto.
No Chrome, Edge ou Brave
- Clique com o botão direito sobre o texto e escolha Inspecionar.
- No painel que abrir, vá até a aba Computed (ou Calculado).
- Role até o fim. Em Rendered Fonts, aparece o nome da fonte que o navegador realmente usou para desenhar aquele trecho.
Esse último passo é o que mais importa. A propriedade font-family, que também
aparece ali, é só uma lista de preferências. O que vale é o que foi desenhado
na tela.
No Firefox
- Clique com o botão direito no texto e escolha Inspecionar.
- No painel lateral, abra a aba Fontes.
- A seção Fontes usadas mostra o nome da família, o peso e de onde o arquivo veio.
O Firefox ainda deixa mexer no tamanho e no peso ali mesmo, o que ajuda a ver se a fonte tem os pesos que você precisa.
No Safari
Ative o menu Desenvolvedor em Ajustes › Avançado. Depois clique com o botão direito no texto, escolha Inspecionar Elemento e procure a seção Fonte na barra lateral de detalhes.
Por que o font-family engana
Um site costuma declarar algo assim:
font-family: "Graphik", "Helvetica Neue", Arial, sans-serif;O navegador tenta a primeira da lista. Se o arquivo não carregar, passa para a segunda, e assim por diante. Por isso, copiar só o primeiro nome pode dar errado: às vezes a fonte da marca nem chegou a carregar e o que você viu foi Arial. O painel de fonte renderizada tira essa dúvida.
Quando o navegador não ajuda
Tem texto que não é texto:
| Onde está o texto | Por que o inspetor não mostra | O que fazer |
|---|---|---|
| Banner ou foto | As letras fazem parte da imagem | Tire um print e envie na ferramenta de captura de tela |
| Logotipo | Quase sempre é um SVG ou imagem | Veja o guia de fonte de logo |
| Vídeo ou animação | O texto está queimado no quadro | Pause no quadro mais nítido e tire um print |
| Celular | Não há inspetor no navegador do telefone | Tire um print e envie na página inicial |
Nesses casos, a comparação pela imagem é o caminho. Um print tirado em tela cheia, sem zoom, entrega letras nítidas e dá o melhor resultado.
Achei o nome. E agora?
Nomes como Inter, Roboto ou Montserrat são de fontes gratuitas, fáceis de
baixar e usar. Nomes com o da marca, como NetflixSans ou AirbnbCereal,
costumam ser fontes feitas sob encomenda e não estão à venda. Aí vale procurar
uma gratuita com medidas parecidas: o guia de
fontes gratuitas parecidas com fontes pagas
traz as trocas mais comuns.
Lembre também que ver a fonte num site não dá direito de usá-la. O arquivo que o site carrega é licenciado para aquele site. Antes de usar num projeto seu, confira a licença, como explicado no guia de licenças de fontes para uso comercial.