How to download a font from a website using Developer Tools

In this article we are going to talk about how you can download fonts from websites in Chrome or Edge browser using developer tools. Chrome and Edge both come with built-in web development and authoring tools used to inspect websites right in the browser. You can do a lot of things with developer tools. For example, it allows you to identify fonts on a website, search the source file, use a built-in beautifier, emulate sensors and location, and more.

Now you can also download fonts from a website using development tools. To download a font from a website, you will have to go through some options and try a trick. Let’s see the procedure in detail.

Download a font from a website using Chrome Developer Tools

In this article, 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 it:

  1. Launch Google Chrome.
  2. Go to the website from which you want to download the fonts.
  3. Open Developer Tools.
  4. Go 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’s see these steps in detail!

First, open Google Chrome and navigate to the website from where you need to download a font. Then go to the three bar menu and click on the More tools> Developer Possibility of tools. Alternatively, you can also press the Ctrl + Shift + I key combination to quickly open the Developer Tools panel.

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

Then click on the Character font category and you will see a list of the built-in fonts with the 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 screenshot below.

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

After that just right click on the font and then in the context menu click on the Copy> Copy response option.

Then add a new tab in your Chrome browser and paste the copied answer into the tab’s address bar, then hit the Enter button. By doing this, a file will be downloaded.

Now go to your Downloads folder where the above font file is downloaded. Now you need to rename this file with the font file extension. To do this, first go to the View in File Explorer, 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 (for example, .woff2) and press the Enter button.

Voila, here’s how to download a font file from a website.

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

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

TRICK: There are many other Chrome Developer Tools tips and tricks you can learn.

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

About Nell Love

Check Also

How to Change the Font Size on Your Kindle

Here we will show you how to change the font size on your Kindle in …

Leave a Reply

Your email address will not be published.