Uma página da Web típica geralmente consiste em vários elementos diferentes, com a maioria deles codificados em cores diferentes e escritos em fontes e estilos diferentes. Às vezes, nos deparamos com páginas da web tão bem projetadas que nos fazem querer aprofundar seus atributos; um tema muito elegante ou uma fonte legal e profissional, talvez.

As pessoas que conhecem as fontes e são fascinadas por elas geralmente usam ferramentas de identificação de fontes online gratuitas^{(free online font identifier tools)} para ajudar a descobrir fontes na web. Essas ferramentas on-line exigem que você insira um URL ou faça upload de uma imagem com a fonte exibida, que é então inspecionada. Caso você não queira passar pelo incômodo de aprender a usar uma nova ferramenta, este post é para você. Hoje, discutiremos como os usuários podem identificar qual fonte uma determinada página da Web está usando sem usar uma extensão de navegador, um aplicativo ou qualquer ferramenta online.

O procedimento que discutiremos neste artigo girará em torno de uma configuração que a maioria dos navegadores da Web oferece, ou seja, ' Ferramentas de desenvolvedor^{(Developer Tools)} ', ou para ser específico, uma opção chamada Inspecionar elemento^{(Inspect Element)} . Aqui, discutiremos como as fontes podem ser identificadas em dois navegadores – Chrome , Edge e Firefox .

Identificar^(Identify) fontes em uma página da Web usando Inspect Element no Firefox

Visite a página da web da fonte que você deseja identificar e clique com o botão direito do mouse no texto que está escrito na fonte de seu interesse.

Na lista de opções que aparecem (menu de contexto), clique em Inspecionar elemento^{(Inspect Element)} . Isso^(Doing) abriria as Ferramentas do desenvolvedor^{(Developer Tools)} na parte inferior da página.

No canto inferior direito da seção Ferramentas de Desenvolvimento^{(Development Tools)} , você encontrará um subtítulo chamado Fonts , clique nele.

Em seguida, ele exibirá as propriedades da fonte que você deseja examinar, como tamanho, altura da linha, peso, etc., e também se a fonte está ou não em itálico ou não, embora isso seja sempre aparente.

Se você estiver interessado em saber mais sobre a fonte em uso, o Firefox também o cobre. Se você rolar a seção de fontes e clicar em 'Todas as fontes na página', a guia de fontes se expandirá e você verá todas as fontes que estão sendo usadas na página da Web que você está navegando no momento, e também onde elas estão sendo usados. Não apenas isso, mas você também obtém uma prévia da aparência de uma fonte específica. Passar o mouse sobre as fontes nas Ferramentas do desenvolvedor^{(Developer Tools)} destacará as seções da página da Web que usam essa fonte.

Identificar uma fonte usando as Ferramentas do desenvolvedor^{(Developer Tools)} no Chrome

O processo é semelhante ao descrito acima. Siga as duas primeiras etapas como você fez com o Firefox para abrir as Ferramentas do desenvolvedor^{(Developer Tools)} no lado direito da página.

Clique no subtítulo 'Computado'.

Role^(Scroll) um pouco para baixo e você encontrará informações sobre a fonte em que está interessado (família da fonte, tamanho etc.)

Infelizmente, o Chrome não fornece informações adicionais como o Firefox .

Identifique^(Identify) qual fonte^(Font) é usada usando o Edge Developer Tools^{(Edge Developer Tools)}

1. Borda aberta
2. Clique com o botão direito do mouse e selecione o texto
3. Selecione Inspecionar
4. Nas Ferramentas do desenvolvedor^{(Developer Tools)} que são abertas, procure em Computed
5. Você verá os detalhes da fonte.

Se você acha que não pode trabalhar com as Ferramentas do Desenvolvedor^{(Developer Tools)} do navegador e que as ferramentas online seriam mais adequadas para você, existem várias delas que funcionam muito bem.

Leia^{(Read next)} a seguir: Como encontrar alternativas gratuitas semelhantes às fontes pagas^{(find similar free alternatives to paid Fonts)} .

Identify fonts in Chrome, Edge and Firefox using Developer Tools

A typical web page generally consists of several different elements with most of thеm coded in different colors and written in different fonts and styles. Sometimеs, we come across wеb pages so bеautifully designed that they make us want to delve deep into their attributes; a very elegant theme оr a nice, professional font, perhaps.

People who know their way around fonts and are fascinated by them often use free online font identifier tools to help discover fonts on the web. These online tools require you to enter a URL or upload an image with the font showcased, which is then inspected. In case you don’t want to go through the hassle of learning to use a new tool, this post is for you. Today, we will discuss how users can identify what font a particular web page is using without using a browser extension, an application, or any online tools.

The procedure that we will be discussing in this article will revolve around a setting that most web browsers offer, namely ‘Developer Tools,’ or to be specific, an option called Inspect Element. Here, we will discuss how fonts can be identified in two browsers – Chrome, Edge and Firefox.

Identify fonts on a webpage using Inspect Element in Firefox

Visit the web page of the font of which you want to identify and right-click on the text that is written in the font you are interested in.

From the list of options that show up (the context menu), click on Inspect Element. Doing so would open the Developer Tools on the bottom of the page.

On the bottom right corner of the Development Tools section, you will find a subhead named Fonts, click on it.

It will then display for you the properties of the font you wanted to look into like its size, line height, weight, etc., and also whether or not the font is in italics or not, though that is always apparent.

If you are interested to know more about the font in use, Firefox has you covered with that too. If you scroll down the fonts section and click on ‘All fonts on the page,’ the fonts tab will expand and you will be shown all the fonts that are being used on the web page you are browsing at the moment, and also where they are being used. Not just that, but you also get a preview of how a particular font looks. Hovering your mouse over the fonts in the Developer Tools will highlight the sections of the web page that use that font.

Identify a font using Developer Tools in Chrome

The process is similar to the one described above. Follow the first two steps as you did with Firefox to open the Developer Tools on the right side of the page.

Click on the ‘Computed’ sub-head.

Scroll down a bit and you will find information about the font you’re interested in (font’s family, size, etc.)

Unfortunately, Chrome doesn’t provide you with any additional information like Firefox does.

Identify which Font is used using Edge Developer Tools

1. Open Edge
2. Right-click and select the text
3. Select Inspect
4. In the Developer Tools that open, look under Computed
5. You will see the Font details.

If you don’t think you can’t work around with browser Developer Tools and that online tools would suit you better, there are several of them that work very well.

Read next: How to find similar free alternatives to paid Fonts.

Related posts

• Como baixar um Font de um Website usando Developer Tools

• Limpar Site Data para particular site em Chrome or Edge usando Developer Tools

• Como alterar o Default Font em Chrome, Edge, Firefox browser

• Desativar Developer Tools em Edge usando Registry or Group Policy

• Fix Blurry File Open dialog Box em Google Chrome and Microsoft Edge

• Web Cache Viewer grátis para Chrome, Firefox and Edge browsers

• Como desativar Password Manager embutido Chrome, Edge, Firefox

• Como abrir Local Files em Chrome, Firefox e Edge

• Como bloquear solicitações Web Notification em Chrome, Firefox, Edge Browser

• 10 Best Chrome, Edge e Firefox extensões para salvar a página para ler mais tarde

• Ativar DNS sobre HTTPS em Firefox, Chrome, Edge, Opera, Android, iphone

• Como fazer Flash work em Chrome, Edge, Firefox NOW

• Como abrir Chrome, Edge or Firefox browser em Full Screen mode

• Add Opera-like Speed Dial para Chrome, Edge or Firefox

• Como alterar User name and Profile image em Edge, Chrome, Firefox

• Como navegar em Text-Only Mode em Chrome, Edge, ou Firefox

• Não é possível abrir o site em particular em Chrome, Firefox, Edge, ou seja,

• Como definir Parental Control em Chrome, Edge, Firefox, Opera

• Este site não é mensagem segura em Edge, Chrome or Firefox

• É seguro salvar senhas em Chrome, Firefox or Edge browser?