Pada artikel ini, kita akan berbicara tentang bagaimana Anda dapat mengunduh font dari situs web di Chrome atau browser Edge menggunakan Alat Pengembang^{(download fonts from websites in Chrome or Edge browser using Developer Tools)} . Baik Chrome dan Edge hadir dengan pengembang web bawaan dan alat pembuat yang digunakan untuk memeriksa situs web secara langsung di browser. Anda dapat melakukan banyak hal dengan Alat Pengembang^{(Developer Tools)} . Misalnya, ini memungkinkan Anda untuk mengidentifikasi font di situs web^{(identify fonts on a website)} , mencari di dalam file sumber, menggunakan beautifier bawaan, meniru sensor dan lokasi geografis, dan banyak lagi.

Sekarang, Anda juga dapat mengunduh font^{(download fonts)} dari situs web menggunakan Alat Pengembang^{(Developer Tools)} . Untuk mengunduh font dari situs web, Anda harus melalui beberapa opsi dan mencoba trik. Mari kita periksa prosedurnya secara rinci.

Unduh ^(Download)Font dari Situs Web^(Website) menggunakan Alat Pengembang Chrome^{(Chrome Developer Tools)}

Dalam posting ini, kami akan menunjukkan kepada Anda langkah-langkah untuk mengunduh font dari situs web di Google Chrome . Anda dapat menggunakan langkah yang sama untuk mengunduh font situs web di browser Microsoft Edge Anda. ^{(Microsoft Edge)}Berikut adalah langkah-langkah untuk melakukannya:

1. Luncurkan Google Chrome.
2. Buka situs web tempat Anda ingin mengunduh font.
3. Buka Alat Pengembang.
4. Arahkan ke tab Jaringan.
5. Klik^(Click) pada opsi Font dan pilih font untuk diunduh.
6. Unduh file fontnya.
7. Ganti nama file yang diunduh dengan ekstensi file font.

Mari kita periksa langkah-langkah ini secara rinci!

Pertama, buka Google Chrome dan buka situs web tempat Anda perlu mengunduh font. Selanjutnya^(Next) , buka menu tiga bilah dan klik opsi More Tools > Developer . Sebagai alternatif, Anda juga dapat menekan kombinasi tombol Ctrl + Shift + I untuk membuka panel Alat Pengembang^{(Developer Tools)} dengan cepat .

Sekarang, di bagian Alat Pengembang^{(Developer Tools)} yang terbuka , klik tombol panah ganda lalu pilih dan buka tab Jaringan^(Network) dari bilah menu atas. Setelah itu, muat ulang situs web tempat Anda berada.

Selanjutnya, klik pada kategori Font dan Anda akan melihat daftar font yang disematkan dengan nama font masing-masing yang ada di situs web. Anda dapat memilih font dari daftar dan Anda akan melihat pratinjaunya di panel khusus seperti yang ditunjukkan pada tangkapan layar di bawah ini.

Sekarang, bagaimana mengidentifikasi format font? Nah^(Well) , cukup arahkan mouse ke font dan lihat ekstensi file di bagian akhir. Lihat tangkapan layar di bawah ini.

Setelah itu, cukup klik kanan pada font, lalu dari menu konteks, klik opsi Copy > Copy Response .

Selanjutnya, tambahkan tab baru di browser Chrome Anda dan rekatkan respons yang disalin ke bilah alamat di tab lalu tekan tombol Enter . Saat Anda melakukannya, sebuah file akan diunduh.

Sekarang, buka folder Unduhan^(Downloads) tempat file font di atas diunduh. Anda sekarang harus mengganti nama file ini dengan ekstensi file font. Untuk itu, pertama, buka tab View di ^{( View)}File Explorer dan kemudian pastikan untuk mengaktifkan opsi File name extensions . Sekarang, pilih file font yang diunduh dan klik opsi Ganti Nama^(Rename) . Tambahkan ekstensi file font yang diidentifikasi (misalnya, .woff2 ) dan tekan tombol Enter.

Voila , ini adalah cara Anda mengunduh file font dari situs web.

Karena Microsoft Edge sekarang didasarkan pada Chromium , seperti Chrome , Anda dapat mengunduh file font di browser Edge dengan mengikuti langkah yang sama seperti di atas.

Semoga artikel ini membantu Anda mempelajari cara mengunduh font dari situs web di browser Chrome^(Chrome) atau Edge menggunakan Alat Pengembang^{(Developer Tools)} .

TIPS^(TIP) : Masih banyak lagi Tips dan Trik Alat Pengembangan Chrome^{(Chrome Development Tools Tips and Tricks)} yang bisa Anda pelajari.

Sekarang baca: ^{(Now read:)} Gunakan Alat Pengembang untuk menghapus Data Situs untuk situs web tertentu di Chrome atau 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 Font di Chrome, Edge and Firefox menggunakan Developer Tools

• Hapus Site Data untuk situs tertentu di Chrome or Edge menggunakan Developer Tools

• Cara Mengubah Default Font di Chrome, Edge, Firefox browser

• Apa Itu Mode Pengembang Chrome & Apa Kegunaannya?

• Nonaktifkan Developer Tools di Edge menggunakan Registry or Group Policy

• Cara Menggunakan Google Pengelola Tag Untuk Menganalisis Lalu Lintas Situs Web Anda

• Hentikan Situs Web dari Mengirim Pemberitahuan di Chrome

• Cara Block and Unblock A Website pada Google Chrome

• Cara Membangun kembali Font cache di Windows 11/10

• 10 Ekstensi Privasi Terbaik untuk Chrome (2022)

• Cara Nonaktifkan atau Aktifkan Pembaca Mode di Chrome di Windows 10

• Change Colors Ukuran System Elements & Font di Windows 10

• Advanced System Font Changer memungkinkan Anda mengubah System Font di Windows

• Chrome update Gagal dengan kode kesalahan 3, 4, 7, 10, 11, 12, dll

• Microsoft Font Maker memungkinkan Anda membuat font khusus secara gratis

• Google Chrome tidak responsif, Relaunch sekarang?

• Setelan Konten Google Chrome: Panduan Lengkap

• Bagaimana cara menggunakan Google Input Tools pada PC Windows 10 saya?

• Best bebas Font Manager software untuk Windows 11/10

• Cara Destroy Profile pada Browser Close di Google Chrome