In questo articolo parleremo di come scaricare i font dai siti Web nel browser Chrome o Edge utilizzando gli Strumenti per sviluppatori^{(download fonts from websites in Chrome or Edge browser using Developer Tools)} . Sia Chrome che Edge sono dotati di strumenti di sviluppo Web e authoring integrati utilizzati per ispezionare i siti Web direttamente nel browser. Puoi fare molte cose con gli Strumenti per sviluppatori^{(Developer Tools)} . Ad esempio, ti consente di identificare i caratteri su un sito Web^{(identify fonts on a website)} , cercare all'interno del file di origine, utilizzare un abbellitore integrato, emulare sensori e posizione geografica e altro ancora.

Ora puoi anche scaricare i caratteri^{(download fonts)} da un sito Web utilizzando gli Strumenti per sviluppatori^{(Developer Tools)} . Per scaricare un font da un sito Web, dovrai esaminare alcune opzioni e provare un trucco. Esaminiamo la procedura nel dettaglio.

Scarica^(Download) un carattere^(Font) da un sito Web^(Website) utilizzando gli strumenti per sviluppatori di Chrome^{(Chrome Developer Tools)}

In questo post, ti mostreremo i passaggi per scaricare un font da un sito Web in Google Chrome . Puoi utilizzare gli stessi passaggi per scaricare un carattere di un sito Web nel browser Microsoft Edge . Ecco i passaggi per farlo:

1. Avvia Google Chrome.
2. Vai al sito Web da cui desideri scaricare i caratteri.
3. Apri gli Strumenti per sviluppatori.
4. Vai alla scheda Rete.
5. Fare clic^(Click) sull'opzione Carattere^(Font) e selezionare un carattere da scaricare.
6. Scarica il file dei caratteri.
7. Rinominare il file scaricato con l'estensione del file del carattere.

Diamo un'occhiata a questi passaggi in dettaglio!

Innanzitutto, apri Google Chrome e vai al sito Web da cui devi scaricare un carattere. Quindi^(Next) , vai al menu a tre barre e fai clic sull'opzione More Tools > DeveloperIn alternativa, puoi anche premere la combinazione di Ctrl + Shift + I per aprire rapidamente il pannello Strumenti per sviluppatori .^{(Developer Tools)}

Ora, nella sezione Strumenti per sviluppatori^{(Developer Tools)} aperta , fai clic sul pulsante a doppia freccia, quindi seleziona e apri la scheda Rete^(Network) dalla barra dei menu in alto. Successivamente, ricarica il sito Web in cui ti trovi.

Successivamente, fai clic sulla categoria Font e vedrai un elenco dei font incorporati con i rispettivi nomi dei font presenti sul sito web. Puoi selezionare un font dall'elenco e vedrai la sua anteprima nel pannello dedicato come mostrato nello screenshot qui sotto.

Ora, come identificare il formato del carattere? Bene^(Well) , passa il mouse sopra il carattere e vedi l'estensione del file alla fine. Fare riferimento allo screenshot qui sotto.

Successivamente, fai semplicemente clic con il pulsante destro del mouse sul carattere, quindi dal menu di scelta rapida, fai clic sull'opzione Copy > Copy Response

Quindi, aggiungi una nuova scheda nel tuo browser Chrome e incolla la risposta copiata nella barra degli indirizzi nella scheda, quindi premi il pulsante Invio^(Enter) . Mentre lo fai, verrà scaricato un file.

Ora vai alla cartella Download^(Downloads) in cui è stato scaricato il file del carattere sopra. Ora devi rinominare questo file con l'estensione del file del carattere. Per questo, prima vai alla scheda Visualizza in ^{( View)}Esplora file^{(File Explorer)} e quindi assicurati di abilitare l' opzione Estensioni dei nomi file . ^{(File name extensions)}Ora seleziona il file del carattere scaricato e fai clic sull'opzione Rinomina . ^(Rename)Aggiungere l'estensione del file del font identificato (ad esempio, .woff2 ) e premere il pulsante Invio.

Voilà^(Voila) , ecco come scaricare un file di font da un sito web.

Poiché Microsoft Edge è ora basato su Chromium , come Chrome , puoi scaricare un file di font nel browser Edge seguendo gli stessi passaggi di cui sopra.

Spero che questo articolo ti abbia aiutato a imparare come scaricare i caratteri da un sito Web nel browser Chrome^(Chrome) o Edge utilizzando gli Strumenti per sviluppatori^{(Developer Tools)} .

SUGGERIMENTO^(TIP) : ci sono molti altri suggerimenti e trucchi per gli strumenti di sviluppo di Chrome^{(Chrome Development Tools Tips and Tricks)} che puoi imparare.

Ora leggi: ^{(Now read:)} usa gli strumenti per sviluppatori per cancellare i dati del sito per un determinato sito web in 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

Іn 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 FONTS IN Chrome, Edge and Firefox Usando Developer Tools

• Cancella Site Data per un particolare sito Chrome or Edge utilizzando Developer Tools

• Come cambiare lo Default Font in Chrome, Edge, Firefox browser

• Che cos'è la modalità sviluppatore di Chrome e quali sono i suoi usi?

• Disabilita Developer Tools in Edge utilizzando Registry or Group Policy

• I migliori strumenti FTP per trasferire file al dominio del tuo sito web

• Come cambiare User Agent and Geolocation in Edge Developer Tools

• Come impostare Custom Keyboard Shortcut in A Chrome Extension

• Chrome update fallito con codici di errore 3, 4, 7, 10, 11, 12, ecc

• Usa questi 4 plugin di Chrome per crittografare i tuoi messaggi Gmail

• Chrome Development Tools Tutorials, Tips, Tricks

• Chrome Connectivity Diagnostics Plugin alla prova la tua Network Connection

• Impostazioni dei contenuti di Google Chrome: una guida completa

• PassProtect Assicurati di non usare password già violate

• Quali sono i diversi formati Font file?

• Come disabilitare o abilitare il lettore Mode in Chrome in Windows 10

• Fix Blurry File Open dialog Box in Google Chrome and Microsoft Edge

• Elenco dei migliori siti Web Online Font Converter gratuiti

• I 10 migliori strumenti e estensioni di Chrome per i web designer

• Come optare da Google FLoC (Privacy Sandbox) in Chrome