在本文中，我们将讨论如何使用开发者工具从 Chrome 或 Edge 浏览器中的网站下载字体^{(download fonts from websites in Chrome or Edge browser using Developer Tools)}。Chrome和Edge都带有内置的 Web 开发人员和创作工具，用于直接在浏览器中检查网站。您可以使用Developer Tools^{(Developer Tools)}做很多事情。例如，它使您能够识别网站上的字体^{(identify fonts on a website)}、在源文件中搜索、使用内置美化器、模拟传感器和地理位置等等。

现在，您还可以使用Developer Tools从网站下载字体^{(download fonts)}。要从网站下载字体，您需要通过一些选项并尝试一个技巧。让我们详细检查一下程序。

^(Download)使用Chrome 开发者^{(Chrome Developer Tools)}工具从网站^(Website)下载字体^(Font)

在这篇文章中，我们将向您展示在Google Chrome中从网站下载字体的步骤。您可以使用相同的步骤在Microsoft Edge浏览器中下载网站字体。以下是执行此操作的步骤：

1. 启动谷歌浏览器。
2. 转到要从其中下载字体的网站。
3. 打开开发者工具。
4. 导航到网络选项卡。
5. 单击^(Click)字体^(Font)选项并选择要下载的字体。
6. 下载字体文件。
7. 使用字体文件扩展名重命名下载的文件。

让我们详细检查这些步骤！

首先，打开谷歌浏览器^{(Google Chrome)}并转到您需要下载字体的网站。接下来^(Next)，转到三栏菜单，然后单击 More Tools > Developer工具选项。或者，您也可以按Ctrl + Shift + I组合键快速打开开发人员工具^{(Developer Tools)}面板。

现在，在打开的开发人员工具^{(Developer Tools)}部分，单击双箭头按钮，然后从顶部菜单栏中选择并打开网络选项卡。^(Network)之后，重新加载您所在的网站。

接下来，单击字体^(Font)类别，您将看到嵌入字体的列表以及网站上存在的相应字体名称。您可以从列表中选择一种字体，您将在专用面板中看到它的预览，如下面的屏幕截图所示。

现在，如何识别字体格式？好吧^(Well)，只需将鼠标悬停在字体上，然后在末尾查看文件扩展名。请参阅下面的屏幕截图。

之后，只需右键单击字体，然后从上下文菜单中单击“Copy > Copy Response选项。

接下来，在Chrome浏览器中添加一个新选项卡，并将复制的响应粘贴到选项卡中的地址栏，然后按Enter按钮。当您这样做时，将下载一个文件。

现在，转到下载^(Downloads)上述字体文件的下载文件夹。您现在必须使用字体文件扩展名重命名此文件。为此，首先，转到文件资源管理器中的^{(File Explorer)}查看^{( View)}选项卡，然后确保启用文件扩展名^{(File name extensions)}选项。现在，选择下载的字体文件并单击重命名^(Rename)选项。添加已识别的字体文件扩展名（例如.woff2）并按 Enter 按钮。

瞧^(Voila)，这就是您从网站下载字体文件的方式。

由于Microsoft Edge现在与^{(Microsoft Edge)}Chrome一样基于Chromium ，因此您可以按照与上述相同的步骤在Edge浏览器中下载字体文件。

希望本文能帮助您了解如何使用开发者工具在^{(Developer Tools)}Chrome或Edge浏览器中从网站下载字体。

提示^(TIP)：您可以学习更多Chrome 开发工具提示和技巧。^{(Chrome Development Tools Tips and Tricks)}

现在阅读：^{(Now read:)} 使用开发者工具清除 Chrome 或 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 you 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字体在Chrome，Edge and Firefox中使用Developer Tools

• 使用Developer Tools清除Chrome or Edge中特定网站的清除Site Data

• 如何改变Default Font在Chrome，Edge，Firefox browser

• 什么是 Chrome 开发者模式及其用途？

• 在Edge禁用Developer Tools使用Registry or Group Policy

• Chrome 的 10 个最佳隐私扩展（2022 年）

• 如何将自定义Keyboard Shortcut设置为Chrome Extension

• FIX：Recaptcha不在Chrome，Firefox或任何浏览器中工作

• Chrome update失败，错误代码3,4，7，10，11，12等

• 阻止网站在 Chrome 中发送通知

• 如何清除Cache，Cookies，Browsing History在Chrome and Firefox

• PassProtect确保您没有使用已违反的密码

• Google Chrome Browser的10个最佳主题

• 将文件传输到您的网站域的最佳 FTP 工具

• 如何在Google Chrome Browser Close上Destroy Profile

• Chrome Connectivity Diagnostics Plugin测试您的Network Connection

• 谷歌浏览器自动填充：完整指南

• 禁用，卸载Adobe Flash，Shockwave在Chrome，Firefox，Edge中，即

• Google Chrome 内容设置：完整指南

• 什么是不同的Font file格式？