Neste artigo, falaremos sobre como você pode baixar fontes de sites no navegador Chrome ou Edge usando as Ferramentas do desenvolvedor^{(download fonts from websites in Chrome or Edge browser using Developer Tools)} . Tanto o Chrome quanto o Edge vêm com ferramentas de criação e desenvolvedor da Web integradas usadas para inspecionar sites diretamente no navegador. Você pode fazer muitas coisas com as Ferramentas do Desenvolvedor^{(Developer Tools)} . Por exemplo, ele permite identificar fontes em um site^{(identify fonts on a website)} , pesquisar no arquivo de origem, usar um embelezador integrado, emular sensores e localização geográfica e muito mais.

Agora, você também pode baixar fontes^{(download fonts)} de um site usando as Ferramentas do desenvolvedor^{(Developer Tools)} . Para baixar uma fonte de um site, você precisará passar por algumas opções e tentar um truque. Vamos verificar o procedimento em detalhes.

Faça o download^(Download) de uma fonte^(Font) de um site^(Website) usando as Ferramentas do desenvolvedor do Chrome^{(Chrome Developer Tools)}

Neste post, mostraremos as etapas para baixar uma fonte de um site no Google Chrome . Você pode usar as mesmas etapas para baixar uma fonte de site no navegador Microsoft Edge . Aqui estão os passos para fazer isso:

1. Inicie o Google Chrome.
2. Vá para o site de onde você deseja baixar as fontes.
3. Abra as Ferramentas do desenvolvedor.
4. Navegue até a guia Rede.
5. Clique^(Click) na opção Fonte^(Font) e selecione uma fonte para download.
6. Baixe o arquivo de fonte.
7. Renomeie o arquivo baixado com a extensão do arquivo de fonte.

Vamos verificar essas etapas em detalhes!

Em primeiro lugar, abra o Google Chrome^{(Google Chrome)} e acesse o site de onde você precisa baixar uma fonte. Em seguida^(Next) , vá para o menu de três barras e clique na opção More Tools > Developer Ferramentas do desenvolvedor. Como alternativa, você também pode pressionar a combinação de teclas Ctrl + Shift + I para abrir rapidamente o painel Ferramentas do desenvolvedor .^{(Developer Tools)}

Agora, na seção Ferramentas do desenvolvedor^{(Developer Tools)} aberta , clique no botão de seta dupla e selecione e abra a guia Rede^(Network) na barra de menu superior. Depois disso, recarregue o site em que você está.

Em seguida, clique na categoria Fonte^(Font) e você verá uma lista das fontes incorporadas com os respectivos nomes de fontes presentes no site. Você pode selecionar uma fonte da lista e verá sua visualização no painel dedicado, conforme mostrado na captura de tela abaixo.

Agora, como identificar o formato da fonte? Bem^(Well) , basta passar o mouse sobre a fonte e ver a extensão do arquivo no final. Consulte a captura de tela abaixo.

Depois disso, basta clicar com o botão direito do mouse na fonte e, no menu de contexto, clicar na opção Copy > Copy Response .

Em seguida, adicione uma nova guia no navegador Chrome e cole a resposta copiada na barra de endereço da guia e pressione o botão Enter . Ao fazer isso, um arquivo será baixado.

Agora, vá para a pasta Downloads , onde o arquivo de fonte acima foi baixado. Agora você precisa renomear este arquivo com a extensão do arquivo de fonte. Para isso, primeiro, vá para a guia Exibir no ^{( View)}Explorador de Arquivos^{(File Explorer)} e, em seguida, certifique-se de habilitar a opção Extensões de nome de arquivo^{(File name extensions)} . Agora, selecione o arquivo de fonte baixado e clique na opção Renomear^(Rename) . Adicione a extensão de arquivo de fonte identificada (por exemplo, .woff2 ) e pressione o botão Enter.

Voila , é assim que você baixa um arquivo de fonte de um site.

Como o Microsoft Edge^{(Microsoft Edge)} agora é baseado no Chromium , como o Chrome , você pode baixar um arquivo de fonte no navegador Edge seguindo as mesmas etapas acima.

Espero que este artigo tenha ajudado você a aprender como baixar fontes de um site no navegador Chrome^(Chrome) ou Edge usando as Ferramentas do desenvolvedor^{(Developer Tools)} .

DICA^(TIP) : Existem muitas outras dicas e truques das ferramentas de desenvolvimento do Chrome^{(Chrome Development Tools Tips and Tricks)} que você pode aprender.

Agora leia: ^{(Now read:)} Use as Ferramentas do desenvolvedor para limpar os dados do site de um site específico no Chrome ou Edge^{(Use Developer Tools to clear Site Data for a particular website in Chrome or Edge)} .

How to download a Font from a Website using Developer Tools

In this article, we will be talking about how yoυ can download fonts from websites in Chrome or Edge browser using Developer Tools. Both Chrome and Edge come with built-in web developer and authoring tools used to inspect websites directly in the browser. You can do a lot of things with the Developer Tools. For example, it enables you to identify fonts on a website, search within the source file, use a built-in beautifier, emulate sensors and geographical location, and more.

Now, you can also download fonts from a website using Developer Tools. To download a font from a website, you will need to go through some options and try a trick. Let’s check out the procedure in detail.

Download a Font from a Website using Chrome Developer Tools

In this post, we are going to show you the steps to download a font from a website in Google Chrome. You can use the same steps to download a website font in your Microsoft Edge browser. Here are the steps to do that:

1. Launch Google Chrome.
2. Go to the website from where you want to download fonts.
3. Open the Developer Tools.
4. Navigate to the Network tab.
5. Click on the Font option and select a font to download.
6. Download the font file.
7. Rename the downloaded file with the font file extension.

Let us check out these steps in detail!

Firstly, open Google Chrome and go to the website from where you need to download a font. Next, go to the three-bar menu and click on the More Tools > Developer Tools option. Alternately, you can also press the Ctrl + Shift + I key combination to quickly open up the Developer Tools panel.

Now, in the opened Developer Tools section, click on the double arrow button and then select and open the Network tab from the top menu bar. After that, reload the website you are on.

Next, click on the Font category and you will see a list of the embedded fonts with respective font names present on the website. You can select a font from the list and you will see its preview in the dedicated panel as shown in the below screenshot.

Now, how to identify the font format? Well, just hover the mouse over the font and see the file extension at the end. Refer to the below screenshot.

After that, simply right-click on the font, and then from the context menu, click on the Copy > Copy Response option.

Next, add a new tab in your Chrome browser and paste the copied response to the address bar in the tab and then press the Enter button. As you do that, a file will be downloaded.

Now, go to your Downloads folder where the above font file is downloaded. You now have to rename this file with the font file extension. For that, first, go to the View tab in the File Explorer and then make sure to enable the File name extensions option. Now, select the downloaded font file and click on the Rename option. Add the identified font file extension (e.g., .woff2) and press the Enter button.

Voila, this is how you download a font file from a website.

Since Microsoft Edge is now based on Chromium, like Chrome, you can download a font file in the Edge browser following the same steps as above.

Hope this article helped you learn how to download fonts from a website in Chrome or Edge browser using Developer Tools.

TIP: There are many more Chrome Development Tools Tips and Tricks that you can learn.

Now read: Use Developer Tools to clear Site Data for a particular website in Chrome or Edge.

Related posts

• Identify fontes em Chrome, Edge and Firefox 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

• O que é o modo de desenvolvedor do Chrome e quais são seus usos?

• Desativar Developer Tools em Edge usando Registry or Group Policy

• Capturar ou tomar capturas de tela no navegador Chrome or Firefox nativamente

• Google Chrome não responde, Relaunch agora?

• Ativar autenticação menos pin para hospedeiros Remote Access em Chrome

• Best grátis Font Manager software para Windows 11/10

• Como limpar Cache, Cookies, Browsing History em Chrome and Firefox

• Como mudar o Default Print Settings em Google Chrome

• Como Destroy Profile em Browser Close em Google Chrome

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

• Como definir o personalizado Keyboard Shortcut para um Chrome Extension

• As 10 melhores extensões de privacidade para Chrome (2022)

• Microsoft Font Maker permite criar fontes personalizadas gratuitamente

• Chrome Connectivity Diagnostics Plugin testes seu Network Connection

• Como corrigir File Download Erros em Google Chrome browser

• Como reconstruir Font cache em Windows 11/10

• Como Block and Unblock um Website em Google Chrome