Trong bài viết này, chúng tôi sẽ nói về cách bạn có thể tải xuống phông chữ từ các trang web trong trình duyệt Chrome hoặc Edge bằng Công cụ dành cho nhà phát triển^{(download fonts from websites in Chrome or Edge browser using Developer Tools)} . Cả Chrome và Edge đều đi kèm với các công cụ tạo và phát triển web tích hợp được sử dụng để kiểm tra các trang web trực tiếp trong trình duyệt. Bạn có thể làm nhiều việc với Công cụ dành cho nhà phát triển^{(Developer Tools)} . Ví dụ: nó cho phép bạn xác định phông chữ trên trang web^{(identify fonts on a website)} , tìm kiếm trong tệp nguồn, sử dụng trình làm đẹp tích hợp, mô phỏng cảm biến và vị trí địa lý, v.v.

Giờ đây, bạn cũng có thể tải xuống phông chữ^{(download fonts)} từ một trang web bằng Công cụ dành cho nhà phát triển^{(Developer Tools)} . Để tải xuống một phông chữ từ một trang web, bạn sẽ cần phải trải qua một số tùy chọn và thử một thủ thuật. Chúng ta hãy kiểm tra các thủ tục chi tiết.

Tải xuống^(Download) Phông chữ^(Font) từ một Trang web^(Website) bằng Công cụ dành cho nhà phát triển Chrome^{(Chrome Developer Tools)}

Trong bài đăng này, chúng tôi sẽ hướng dẫn bạn các bước để tải xuống phông chữ từ một trang web trong Google Chrome . Bạn có thể sử dụng các bước tương tự để tải xuống phông chữ trang web trong trình duyệt Microsoft Edge của mình. ^{(Microsoft Edge)}Dưới đây là các bước để làm điều đó:

1. Khởi chạy Google Chrome.
2. Truy cập trang web từ nơi bạn muốn tải xuống phông chữ.
3. Mở Công cụ dành cho nhà phát triển.
4. Điều hướng đến tab Mạng.
5. Nhấp^(Click) vào tùy chọn Phông chữ^(Font) và chọn phông chữ để tải xuống.
6. Tải xuống tệp phông chữ.
7. Đổi tên tệp đã tải xuống bằng phần mở rộng tệp phông chữ.

Hãy để chúng tôi kiểm tra các bước chi tiết!

Trước tiên, hãy mở Google Chrome và truy cập trang web từ nơi bạn cần tải xuống phông chữ. Tiếp theo^(Next) , chuyển đến menu ba thanh và nhấp vào tùy chọn Công More Tools > Developer . Ngoài ra, bạn cũng có thể nhấn tổ hợp Ctrl + Shift + I để mở nhanh bảng Công cụ dành cho nhà phát triển^{(Developer Tools)} .

Bây giờ, trong phần Công cụ dành cho nhà phát triển^{(Developer Tools)} đã mở , hãy nhấp vào nút mũi tên kép, sau đó chọn và mở tab Mạng^(Network) từ thanh menu trên cùng. Sau đó, tải lại trang web bạn đang truy cập.

Tiếp theo, nhấp vào danh mục Phông chữ^(Font) và bạn sẽ thấy danh sách các phông chữ được nhúng với tên phông chữ tương ứng có trên trang web. Bạn có thể chọn một phông chữ từ danh sách và bạn sẽ thấy bản xem trước của nó trong bảng điều khiển chuyên dụng như thể hiện trong ảnh chụp màn hình bên dưới.

Bây giờ, làm thế nào để xác định định dạng phông chữ? Chà^(Well) , chỉ cần di chuột qua phông chữ và xem phần mở rộng tệp ở cuối. Tham khảo ảnh chụp màn hình bên dưới.

Sau đó, chỉ cần nhấp chuột phải vào phông chữ, rồi từ menu ngữ cảnh, nhấp vào tùy chọn Copy > Copy Response .

Tiếp theo, thêm một tab mới trong trình duyệt Chrome của bạn và dán phản hồi đã sao chép vào thanh địa chỉ trong tab rồi nhấn nút Enter . Khi bạn làm điều đó, một tệp sẽ được tải xuống.

Bây giờ, hãy chuyển đến thư mục Tải xuống^(Downloads) của bạn nơi tải xuống tệp phông chữ ở trên. Bây giờ bạn phải đổi tên tệp này với phần mở rộng tệp phông chữ. Đối với điều đó, trước tiên, hãy chuyển đến tab Xem trong ^{( View)}File Explorer và sau đó đảm bảo bật tùy chọn Phần mở rộng tên tệp^{(File name extensions)} . Bây giờ, chọn tệp phông chữ đã tải xuống và nhấp vào tùy chọn Đổi tên^(Rename) . Thêm phần mở rộng tệp phông chữ đã xác định (ví dụ: .woff2 ) và nhấn nút Enter.

Thì đấy^(Voila) , đây là cách bạn tải xuống tệp phông chữ từ một trang web.

Vì Microsoft Edge hiện dựa trên Chromium , giống như Chrome , bạn có thể tải xuống tệp phông chữ trong trình duyệt Edge theo các bước tương tự như trên.

Hy vọng bài viết này đã giúp bạn tìm hiểu cách tải xuống phông chữ từ trang web trong trình duyệt Chrome hoặc Edge bằng Công cụ dành cho nhà phát triển^{(Developer Tools)} .

MẸO^(TIP) : Có rất nhiều Mẹo và Thủ thuật dành cho Công cụ Phát triển Chrome^{(Chrome Development Tools Tips and Tricks)} khác mà bạn có thể tìm hiểu.

Bây giờ hãy đọc: ^{(Now read:)} Sử dụng Công cụ dành cho nhà phát triển để xóa Dữ liệu trang web cho một trang web cụ thể trong Chrome hoặc 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 аrticle, we wіll 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

• Phông chữ Identify trong Chrome, Edge and Firefox sử dụng Developer Tools

• Rõ ràng Site Data cho trang web cụ thể trong Chrome or Edge sử dụng Developer Tools

• Cách thay đổi Default Font trong Chrome, Edge, Firefox browser

• Chế độ nhà phát triển Chrome là gì và công dụng của nó là gì?

• Vô hiệu hóa Developer Tools bằng Edge bằng Registry or Group Policy

• Cách Highlight một Active Tab trong Chrome Browser

• Cách xây dựng lại Font cache trong Windows 11/10

• shortcut F12 keyboard Disable cho Microsoft Edge Developer Tools

• Cách đặt Keyboard Shortcut tùy chỉnh sang Chrome Extension

• Kích hoạt Line Wrap bằng Source View trong Chrome or Edge

• Cách vô hiệu hóa hoặc bật Trình đọc Mode bằng Chrome trong Windows 10

• Cách bật Media Playback Control toàn cầu trong Chrome

• Cách thay đổi mặc định System Font trong Windows 10

• Ngăn một trang web gửi thông báo trong Chrome

• Cách xóa Cache, Cookies, Browsing History trong Chrome and Firefox

• Danh sách các trang web Online Font Converter miễn phí tốt nhất

• Kích hoạt tính năng mã PIN-less xác thực cho Remote Access Hosts trong Chrome

• Tự động điền của Google Chrome: Hướng dẫn đầy đủ

• Chrome Connectivity Diagnostics Plugin kiểm tra Network Connection của bạn

• Nhập Bookmarks, Passwords vào Chrome từ trình duyệt khác