Como ver qual fonte um site está usando

Se você já ficou completamente impressionado com uma fonte que viu em um site, deve estar se perguntando como descobrir como ela se chama para poder usá-la em seu próprio conteúdo. Tipografia de qualidade pode melhorar as experiências de leitura dos visitantes, portanto, pode valer a pena fazer um esforço para encontrá-la. Independentemente do motivo para verificar qual fonte é usada em um site, há muitas ferramentas que podem ajudar.

Neste artigo, discutiremos por que você pode querer ver qual fonte um site está usando. Também mostraremos como fazer isso.

Vamos começar!

Inscreva-se no nosso canal no Youtube

Por que você pode querer verificar qual fonte um site está usando

Como já mencionamos, fontes bonitas e legíveis podem melhorar a experiência do usuário (UX) e a legibilidade do seu site. Ele também garante que os visitantes possam interagir confortavelmente com seu conteúdo, sem se esforçar para decifrá-lo. Se o seu texto for elegante, mas ilegível, os leitores terão dificuldade em compreender ou apreciar o seu material.

Os botões de call to action (CTA) também podem se tornar inúteis se o texto não for legível. É por isso que você pode achar útil manter uma lista de fontes que chamam sua atenção por serem elegantes e legíveis. Você pode então usá-los em seu site ou para um cliente no futuro.

Como ver qual fonte um site está usando (3 métodos disponíveis)

Existem vários métodos que você pode usar para verificar qual fonte um site está usando. O recurso de inspeção do navegador é uma solução excelente, mas existem extensões que podem produzir efeitos equivalentes. Você pode até encontrar fontes de imagens usando ferramentas online. Vamos dar uma olhada em cada uma dessas opções.

1. Identificar fontes usando a ferramenta Inspetor de navegador

Uma das maneiras mais fáceis de verificar qual fonte um site está usando é com a ferramenta de inspeção do navegador. Embora estejamos trabalhando com o Chrome Inspector neste exemplo, é importante notar que outros navegadores possuem recursos equivalentes.

Primeiro, clique com o botão direito na página da web que contém a fonte que você deseja encontrar. No menu resultante, selecione Inspecionar:

Se você preferir usar um atalho de teclado, tente Ctrl + Shift + I para Windows ou Linux. Se você estiver usando um Mac, o equivalente é Cmd + Shift + I.

Na janela do lado direito da tela, procure o texto usando a fonte que deseja verificar. Ele ficará destacado quando você selecionar o elemento HTML correspondente:

Em seguida, clique na guia Computado e pesquise por “família de fontes”:

Você deve ver o nome da fonte e seu estilo listados aqui.

Para ver o CSS relacionado à fonte, olhe na guia Estilos . Você pode rolar para pesquisar os valores relacionados à fonte. No entanto, como pode haver substituições e regras de estilo irrelevantes aqui, a guia Computado geralmente é mais útil.

2. Encontre fontes por meio de uma extensão do navegador

As extensões do navegador podem fornecer uma maneira mais direta de localizar detalhes de fontes em um site, especialmente se você não estiver familiarizado com o Inspetor. Além disso, eles geralmente podem fornecer a resposta que você está procurando com mais rapidez, para que você possa voltar à tarefa em questão.

Alguns desses complementos incluem:

• Fontanello: de uso gratuito, esta extensão permite que você encontre o nome, o peso, o estilo de uma fonte e muito mais, simplesmente destacando e clicando com o botão direito do mouse enquanto navega.
• WhatFont: simplificando ainda mais a detecção de fontes, WhatFont permite que você visualize o nome de uma fonte apenas passando o mouse sobre ele.
• CSS Peeper: feito com web designers em mente, esta extensão é um pouco mais robusta e pode fornecer detalhes adicionais do código CSS da página da web.

No entanto, cada uma dessas extensões tem suporte de navegador variado. WhatFont está disponível para Firefox, Chrome, Safari e Internet Explorer. Fontanello, por outro lado, está disponível apenas para Firefox e Chrome. CSS Peeper é uma ferramenta específica do Chrome que você não poderá usar com nenhuma outra plataforma.

Com o objetivo de encontrar rapidamente o nome de uma fonte específica, WhatFont é a opção mais fácil de usar. Uma vez que também oferece suporte para a maioria dos navegadores, vamos usá-lo para uma rápida demonstração.

Depois de instalar o WhatFont, você pode verificar qual fonte um site está usando ativando-a na barra de ferramentas do seu navegador e passando o mouse sobre algum texto:

Ao passar o mouse sobre o texto pela primeira vez, você verá apenas o nome da fonte. No entanto, clicar no nome exibirá um pop-up expandido com mais detalhes, como tamanho, peso, cor e altura da linha. Ele também pode identificar se uma fonte está disponível por meio do Typekit ou Google Fonts.

Depois de verificar os detalhes da fonte, você pode sair da ferramenta usando o botão Sair WhatFont no canto superior direito da janela do navegador.

3. Detectar fontes em imagens

Finalmente, você também pode tentar visualizar as fontes usadas nas imagens. Isso inclui fontes que você viu em logotipos ou infográficos. Em nossa experiência com detectores de fontes, WhatTheFont é a ferramenta online mais eficaz para esse trabalho.

Para usar WhatTheFont, você precisará fazer upload da imagem em questão e selecionar a seção com a fonte relevante:

Em seguida, ele retornará uma página de resultados com várias fontes que são semelhantes, se não correspondências exatas, àquela que você está tentando identificar:

Sua taxa de sucesso aqui pode variar dependendo da fonte e popularidade da fonte. Se o nome exato da fonte for muito importante para você, pode ser difícil encontrar uma ferramenta que forneça o que você deseja.

No entanto, se você estiver aberto para usar uma fonte semelhante à que encontrou em uma imagem, um detector online deve atender perfeitamente às suas necessidades.

Conclusão

Fontes visualmente atraentes e legíveis podem aprimorar a experiência de leitura dos visitantes do seu site. Isso pode fazer com que você fique atento a novos tipos de fontes que possa usar em seu site ou para seus clientes. Independentemente do motivo para querer verificar qual fonte um site está usando, existem muitas ferramentas que podem ajudá-lo.

Nesta postagem, discutimos três métodos para ver qual fonte um site está usando:

1. Identifique as fontes usando a ferramenta de inspeção do navegador.
2. Encontre fontes usando uma extensão do navegador, como WhatFont.
3. Detecte fontes em imagens usando WhatTheFont.

Você tem alguma dúvida sobre como verificar qual fonte é usada em um site? Deixe-nos saber na seção de comentários abaixo!

Imagem por rudall30 / shutterstock.com