Dans cet article, nous parlerons de la façon dont vous pouvez télécharger des polices à partir de sites Web dans le navigateur Chrome ou Edge à l'aide des outils de développement^{(download fonts from websites in Chrome or Edge browser using Developer Tools)} . Chrome et Edge sont livrés avec des outils de développement et de création Web intégrés utilisés pour inspecter les sites Web directement dans le navigateur . ^(Chrome)Vous pouvez faire beaucoup de choses avec les outils de développement^{(Developer Tools)} . Par exemple, il vous permet d' identifier les polices sur un site Web^{(identify fonts on a website)} , de rechercher dans le fichier source, d'utiliser un embellisseur intégré, d'émuler des capteurs et un emplacement géographique, etc.

Désormais, vous pouvez également télécharger des polices^{(download fonts)} à partir d'un site Web à l'aide des outils de développement^{(Developer Tools)} . Pour télécharger une police à partir d'un site Web, vous devrez parcourir certaines options et essayer une astuce. Voyons la procédure en détail.

Télécharger^(Download) une police^(Font) à partir d'un site Web^(Website) à l'aide des outils de développement Chrome^{(Chrome Developer Tools)}

Dans cet article, nous allons vous montrer les étapes pour télécharger une police à partir d'un site Web dans Google Chrome . Vous pouvez utiliser les mêmes étapes pour télécharger une police de site Web dans votre navigateur Microsoft Edge . Voici les étapes à suivre :

1. Lancez Google Chrome.
2. Accédez au site Web à partir duquel vous souhaitez télécharger les polices.
3. Ouvrez les outils de développement.
4. Accédez à l'onglet Réseau.
5. Cliquez^(Click) sur l' option Police^(Font) et sélectionnez une police à télécharger.
6. Téléchargez le fichier de police.
7. Renommez le fichier téléchargé avec l'extension de fichier de police.

Laissez-nous vérifier ces étapes en détail!

Tout d'abord, ouvrez Google Chrome et accédez au site Web à partir duquel vous devez télécharger une police. Ensuite^(Next) , allez dans le menu à trois barres et cliquez sur l' option More Tools > DeveloperAlternativement, vous pouvez également appuyer sur la combinaison de Ctrl + Shift + I pour ouvrir rapidement le panneau Outils de développement .^{(Developer Tools)}

Maintenant, dans la section Outils de développement^{(Developer Tools)} ouverte , cliquez sur le bouton à double flèche, puis sélectionnez et ouvrez l' onglet Réseau^(Network) dans la barre de menus supérieure. Après cela, rechargez le site Web sur lequel vous vous trouvez.

Ensuite, cliquez sur la catégorie Police^(Font) et vous verrez une liste des polices intégrées avec les noms de police respectifs présents sur le site Web. Vous pouvez sélectionner une police dans la liste et vous verrez son aperçu dans le panneau dédié, comme indiqué dans la capture d'écran ci-dessous.

Maintenant, comment identifier le format de police ? Eh bien^(Well) , passez simplement la souris sur la police et voyez l'extension de fichier à la fin. Reportez-vous à la capture d'écran ci-dessous.

Après cela, faites simplement un clic droit sur la police, puis dans le menu contextuel, cliquez sur l' option Copy > Copy Response

Ensuite, ajoutez un nouvel onglet dans votre navigateur Chrome et collez la réponse copiée dans la barre d'adresse de l'onglet, puis appuyez sur le bouton Entrée . ^(Enter)Pendant que vous faites cela, un fichier sera téléchargé.

Maintenant, allez dans votre dossier Téléchargements où le fichier de police ci-dessus est téléchargé. ^(Downloads)Vous devez maintenant renommer ce fichier avec l'extension de fichier de police. Pour cela, allez d'abord dans l' onglet Affichage de l' ^{( View)}explorateur de fichiers^{(File Explorer)} , puis assurez-vous d'activer l' option Extensions de nom de fichier . ^{(File name extensions)}Maintenant, sélectionnez le fichier de police téléchargé et cliquez sur l' option Renommer . ^(Rename)Ajoutez l'extension de fichier de police identifiée (par exemple, .woff2 ) et appuyez sur le bouton Entrée.

Voila , c'est ainsi que vous téléchargez un fichier de police à partir d'un site Web.

Étant donné que Microsoft Edge est désormais basé sur Chromium , comme Chrome , vous pouvez télécharger un fichier de police dans le navigateur Edge en suivant les mêmes étapes que ci-dessus.

J'espère que cet article vous a aidé à apprendre à télécharger des polices à partir d'un site Web dans le navigateur Chrome^(Chrome) ou Edge à l'aide des outils de développement^{(Developer Tools)} .

ASTUCE^(TIP) : Il existe de nombreux autres trucs et astuces sur les outils de développement Chrome^{(Chrome Development Tools Tips and Tricks)} que vous pouvez apprendre.

Lisez maintenant : ^{(Now read:)} Utilisez les outils de développement pour effacer les données de site d'un site Web particulier dans Chrome ou 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 Polices en Chrome, Edge and Firefox en utilisant Developer Tools

• Effacer Site Data pour un site particulier dans Chrome or Edge en utilisant Developer Tools

• Comment changer le Default Font dans Chrome, Edge, Firefox browser

• Qu'est-ce que le mode développeur de Chrome et à quoi sert-il ?

• Désactiver Developer Tools dans Edge en utilisant Registry or Group Policy

• Comment retirer de Google FLoC (Privacy Sandbox) dans Chrome

• Microsoft Font Maker vous permet de créer des polices personnalisées gratuitement

• Import Bookmarks, Passwords dans Chrome depuis un autre navigateur

• Advanced System Font Changer vous permet de changer System Font dans Windows

• Comment réparer les erreurs File Download sur Google Chrome browser

• Activer Line Wrap dans Source View dans Chrome or Edge

• Comment créer un Desktop Shortcut de Website dans Chrome

• Comment effacer Cache, Cookies, Browsing History dans Chrome and Firefox

• Chrome update a échoué avec les codes d'erreur 3, 4, 7, 10, 11, 12, etc

• Comment changer le Default Print Settings dans Google Chrome

• Désactiver, désinstaller Adobe Flash, Shockwave dans Chrome, Firefox, Edge, IE

• Best gratuit Font Manager software pour Windows 11/10

• Google Chrome est insensible, Relaunch maintenant?

• Comment activer Global Media Playback Control dans Chrome

• Chrome Development Tools Tutorials, Tips, Tricks