En este artículo, hablaremos sobre cómo puede descargar fuentes de sitios web en el navegador Chrome o Edge usando las herramientas para desarrolladores^{(download fonts from websites in Chrome or Edge browser using Developer Tools)} . Tanto Chrome como Edge vienen con herramientas integradas de creación y desarrollo web que se utilizan para inspeccionar sitios web directamente en el navegador. Puede hacer muchas cosas con las herramientas de desarrollo^{(Developer Tools)} . Por ejemplo, le permite identificar fuentes en un sitio web^{(identify fonts on a website)} , buscar dentro del archivo fuente, usar un embellecedor incorporado, emular sensores y ubicación geográfica, y más.

Ahora, también puede descargar fuentes^{(download fonts)} desde un sitio web utilizando las herramientas para desarrolladores^{(Developer Tools)} . Para descargar una fuente de un sitio web, deberá pasar por algunas opciones y probar un truco. Veamos el procedimiento en detalle.

Descargar^(Download) una fuente^(Font) de un sitio web^(Website) con las herramientas para desarrolladores de Chrome^{(Chrome Developer Tools)}

En esta publicación, le mostraremos los pasos para descargar una fuente de un sitio web en Google Chrome . Puede usar los mismos pasos para descargar una fuente de sitio web en su navegador Microsoft Edge . Estos son los pasos para hacerlo:

1. Inicie Google Chrome.
2. Vaya al sitio web desde donde desea descargar las fuentes.
3. Abra las herramientas de desarrollo.
4. Navegue a la pestaña Red.
5. Haga clic^(Click) en la opción Fuente^(Font) y seleccione una fuente para descargar.
6. Descarga el archivo de fuente.
7. Cambie el nombre del archivo descargado con la extensión de archivo de fuente.

¡Veamos estos pasos en detalle!

En primer lugar, abra Google Chrome y vaya al sitio web desde donde necesita descargar una fuente. A continuación^(Next) , ve al menú de tres barras y haz clic en la opción More Tools > DeveloperAlternativamente, también puede presionar la combinación de Ctrl + Shift + I para abrir rápidamente el panel Herramientas para desarrolladores .^{(Developer Tools)}

Ahora, en la sección Herramientas para desarrolladores^{(Developer Tools)} abierta , haga clic en el botón de flecha doble y luego seleccione y abra la pestaña Red^(Network) en la barra de menú superior. Después de eso, vuelva a cargar el sitio web en el que se encuentra.

A continuación, haga clic en la categoría Fuente^(Font) y verá una lista de las fuentes incrustadas con los respectivos nombres de fuentes presentes en el sitio web. Puede seleccionar una fuente de la lista y verá su vista previa en el panel dedicado, como se muestra en la siguiente captura de pantalla.

Ahora, ¿cómo identificar el formato de fuente? Bueno^(Well) , simplemente pase el mouse sobre la fuente y vea la extensión del archivo al final. Consulte la siguiente captura de pantalla.

Después de eso, simplemente haga clic con el botón derecho en la fuente y luego, desde el menú contextual, haga clic en la opción Copy > Copy Response

Luego, agregue una nueva pestaña en su navegador Chrome y pegue la respuesta copiada en la barra de direcciones en la pestaña y luego presione el botón Enter . Al hacerlo, se descargará un archivo.

Ahora, vaya a su carpeta de Descargas^(Downloads) donde se descarga el archivo de fuente anterior. Ahora debe cambiar el nombre de este archivo con la extensión de archivo de fuente. Para eso, primero, vaya a la pestaña Ver en el ^{( View)}Explorador^{(File Explorer)} de archivos y luego asegúrese de habilitar la opción Extensiones de nombre de archivo . ^{(File name extensions)}Ahora, seleccione el archivo de fuente descargado y haga clic en la opción Cambiar nombre . ^(Rename)Agregue la extensión de archivo de la fuente identificada (p. ej., .woff2 ) y presione el botón Enter.

Listo^(Voila) , así es como descargas un archivo de fuente de un sitio web.

Dado que Microsoft Edge ahora se basa en Chromium , como Chrome , puede descargar un archivo de fuente en el navegador Edge siguiendo los mismos pasos que arriba.^(Edge)

Espero que este artículo le haya ayudado a aprender cómo descargar fuentes de un sitio web en el navegador Chrome^(Chrome) o Edge usando las herramientas para desarrolladores^{(Developer Tools)} .

CONSEJO^(TIP) : Hay muchos más consejos y trucos de las herramientas de desarrollo de Chrome^{(Chrome Development Tools Tips and Tricks)} que puede aprender.

Ahora lea: ^{(Now read:)} use las herramientas para desarrolladores para borrar los datos del sitio para un sitio web en particular en Chrome o 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 Fuentes en Chrome, Edge and Firefox Uso de Developer Tools

• Site Data claro para determinado sitio en Chrome or Edge usando Developer Tools

• Cómo cambiar el Default Font en Chrome, Edge, Firefox browser

• ¿Qué es el modo de desarrollador de Chrome y cuáles son sus usos?

• Desactive Developer Tools en Edge usando Registry or Group Policy

• Deshabilitar, desinstalar Adobe Flash, Shockwave en Chrome, Firefox, Edge, es decir,

• Cómo cambiar el Default Print Settings en Google Chrome

• Las 10 mejores extensiones de privacidad para Chrome (2022)

• Use estos 4 complementos de Chrome para cifrar sus mensajes de Gmail

• Cómo reconstruir Font cache en Windows 11/10

• Best GRATIS Font Manager software PARA Windows 11/10

• Impedir que un sitio web envíe notificaciones en Chrome

• Las mejores herramientas de FTP para transferir archivos al dominio de su sitio web

• Cómo deshabilitar o habilitar al lector Mode en Chrome en Windows 10

• Autocompletar de Google Chrome: una guía completa

• ¿Cuáles son los diferentes formatos Font file?

• PassProtect se asegura de que no está usando contraseñas ya violadas

• Cómo borrar Cache, Cookies, Browsing History en Chrome and Firefox

• Cómo cambiar User Agent and Geolocation en Edge Developer Tools

• Chrome update falló con códigos de error 3, 4, 7, 10, 11, 12, etc