Como saber quais fontes um site usa

Se você já viu um site particularmente atraente e se perguntou como ver quais fontes um site usa, a resposta é tão simples quanto abrir o inspetor do seu navegador. Cada bit de um site é interpretado em seu navegador. Assim, se você souber usar corretamente o seu inspetor do navegador, poderá descobrir não apenas as fontes, mas também as imagens que ele possui, as propriedades CSS de qualquer outro elemento encontrado na página.

Neste post, veremos como usar o inspetor do navegador Chrome para descobrir quais fontes um site usa e até mesmo como começar a brincar com elas. Mas primeiro, vou explicar como acessá-lo e quais recursos você tem disponíveis no inspetor.

Acesse o Inspetor do Chrome

Se você usa o navegador Chrome e deseja inspecionar um site, a primeira coisa que deve fazer é acessar a janela do inspetor. Existem várias maneiras de fazer isso:

• Pressionando a tecla F12 ou
• Clicando com o botão direito em um determinado item e no menu que se abre, acesse a opção Inspect . A vantagem deste método é que ele destaca diretamente o elemento em questão, ou
• Pressionando a combinação de teclas Control + Shift + I (no Windows) ou Cmd + Alt + I (no Mac), ou
• Ao acessar o menu do Chrome (3 pontos na barra superior direita) » Mais ferramentas » Ferramentas do desenvolvedor.

A janela do inspetor pode ser exibida integrada na própria janela do navegador ou exibida em uma janela separada. Para acessar essas opções, você pode fazê-lo clicando no ícone de configuração (3 pontos) no canto superior direito do inspetor e alterando o valor da propriedade «Dock Side».

Você também tem a opção de visualizar o conteúdo da página no modo de visualização do computador ou como se estivesse visualizando em um dispositivo móvel. Clique no segundo botão do lado esquerdo da barra superior do inspetor e você verá como o conteúdo será exibido automaticamente como se estivesse acessando de um dispositivo móvel.

Você também pode indicar o tipo de dispositivo em que deseja exibi-lo, o tamanho ou se deseja exibi-lo no modo retrato ou paisagem.

Guias Principais do Inspetor

Como você deve ter visto, o inspetor é composto por diferentes abas.

A partir de cada um deles terá acesso a diferentes funcionalidades e funcionalidades:

• Elementos : mostra o código HTML da página, bem como os estilos aplicados. você também pode modificá-los e adicionar novas regras rapidamente.
• Console : mostra as diferentes mensagens de erro e aviso que ocorrem na página (imagens que não carregam, erros de javascript,…)
• Sources : exibe a árvore de recursos da página. Você pode ver de onde os diferentes recursos são obtidos e modificá-los.
• Rede : mostra as diferentes solicitações feitas a partir do site, acessando o conteúdo da solicitação, a resposta obtida, tempos…
• Performance : mostra os processos que estão em execução e serve para medir o desempenho da página.
• Memória : mostra a memória consumida durante o carregamento e execução da página web.
• Aplicação : exibe informações úteis sobre os recursos utilizados por uma aplicação web.
• Segurança : exibe informações sobre os diferentes sites acessados ​​a partir da página e seus respectivos certificados.
• Auditorias : permite gerar um relatório de auditoria para verificar erros.
• Existem plugins que adicionam abas e funcionalidades ao inspetor, então pode haver mais abas. Na imagem anterior, é mostrado que instalamos o plugin Redux DevTools .

Aba Elementos

Voltemos agora ao assunto em questão: queríamos saber a fonte de qualquer conteúdo em uma página da web.

Como mencionei anteriormente, na guia Elementos você pode acessar o código HTML e os estilos dos diferentes elementos da página em que está.

Como você pode ver na imagem acima, à esquerda você tem a janela principal que mostra o código-fonte. E à direita, você tem o painel de regras de estilo CSS que estão sendo aplicadas aos diferentes elementos da página.

Na verdade, no painel de estilos você tem três abas:

• Estilos : mostra as regras CSS aplicadas e você pode modificar e adicionar novas.
• Computado : mostra todas as regras aplicadas ao elemento, com um painel que representa as bordas, margem e preenchimento do elemento.
• Event Listeners : mostra a árvore de eventos que foram lançados na página e os controles afetados por eles.

Ver os detalhes de um item

Assim, por exemplo, se você for à nossa página principal do Nelio Software, selecione as palavras Nelio Software no título e clique com o botão direito do mouse para inspecionar qual é o item, o inspetor se abre mostrando a imagem acima.

Na imagem do inspetor, você pode ver que a janela principal está me informando que o estilo do título “Nelio Software” é h1 .

Nesta mesma janela, você tem a opção de clicar com o botão direito do mouse em qualquer atributo ou texto e modificá-lo ou excluí-lo. Obviamente, qualquer alteração que você fizer aqui não alterará o conteúdo original, mas é precisamente uma ferramenta muito útil quando você está projetando páginas e deseja ter uma ideia de como é a aparência de qualquer alteração feita.

Veja a fonte

Agora você sabe que é um título, mas e a fonte?

Bem, muito simples, na aba Calculado do inspetor você encontrará todas as propriedades do item selecionado. Role para baixo até o atributo font-family e lá você encontrará exatamente a fonte que tem o título do nosso site.

E se você estiver curioso sobre como esse elemento ficaria se você quisesse alterar a fonte, vá para a guia Styles , desça até o atributo font-family e você pode modificá-lo diretamente com o valor desejado.

Você verá automaticamente seu site com o tipo de fonte alterado

Como você pode ver, o inspetor do Google Chrome é uma ferramenta muito confortável e fácil de usar para brincar e experimentar o design que você teria depois de aplicar qualquer modificação em um elemento.

E a fonte de uma imagem?

O inspetor do Google Chrome, como você viu, permite visualizar as propriedades de qualquer elemento em sua página. Mas se você quiser ver a fonte de uma imagem em um site, não poderá ver isso com o inspetor. O inspetor mostrará as propriedades da imagem como tal inserida em sua página, mas não mostrará os detalhes do conteúdo dessa imagem.

Para isso, existem algumas ferramentas, como Font Squirrel Matcherator ou Whatfontis.com, que podem ajudar a identificar a fonte utilizada em uma imagem. Para isso, em ambas as ferramentas você deve baixar a imagem (em whatfontis.com você também pode indicar o URL da imagem) e depois selecionar a parte da imagem que contém a letra que deseja identificar.

Ambas as ferramentas mostrarão um conjunto completo de fontes que correspondem aproximadamente ao texto selecionado. Mas se você suspeitar que isso não é uma correspondência exata, você pode pesquisar no Google fontes semelhantes às indicadas pela ferramenta e verá o que obtém.

Imagem em destaque de Gemma Evans no Unsplash.