В тази статия ще говорим за това как можете да изтегляте шрифтове от уебсайтове в браузъра Chrome или Edge с помощта на Инструменти за разработчици^{(download fonts from websites in Chrome or Edge browser using Developer Tools)} . И Chrome , и Edge идват с вградени инструменти за уеб разработчик и авторски инструменти, използвани за проверка на уебсайтове директно в браузъра. Можете да правите много неща с инструментите за разработчици^{(Developer Tools)} . Например, той ви позволява да идентифицирате шрифтове на уебсайт^{(identify fonts on a website)} , да търсите в изходния файл, да използвате вграден разкрасител, да емулирате сензори и географско местоположение и др.

Сега можете също да изтегляте шрифтове^{(download fonts)} от уебсайт, като използвате Инструменти за разработчици^{(Developer Tools)} . За да изтеглите шрифт от уебсайт, ще трябва да преминете през някои опции и да опитате трик. Нека разгледаме подробно процедурата.

Изтеглете ^(Download)шрифт^(Font) от уебсайт^(Website) с помощта на инструментите за разработчици на Chrome^{(Chrome Developer Tools)}

В тази публикация ще ви покажем стъпките за изтегляне на шрифт от уебсайт в Google Chrome . Можете да използвате същите стъпки, за да изтеглите шрифт за уебсайт във вашия браузър Microsoft Edge . Ето стъпките за това:

1. Стартирайте Google Chrome.
2. Отидете на уебсайта, откъдето искате да изтеглите шрифтове.
3. Отворете Инструментите за разработчици.
4. Придвижете се до раздела Мрежа.
5. Щракнете^(Click) върху опцията Шрифт^(Font) и изберете шрифт за изтегляне.
6. Изтеглете файла с шрифтове.
7. Преименувайте изтегления файл с разширението на файла за шрифт.

Нека разгледаме тези стъпки подробно!

Първо отворете Google Chrome и отидете на уебсайта, откъдето трябва да изтеглите шрифт. След^(Next) това отидете в менюто с три ленти и щракнете върху опцията More Tools > Developer . Алтернативно, можете също да натиснете Ctrl + Shift + I , за да отворите бързо панела с инструменти за разработчици .^{(Developer Tools)}

Сега, в отворената секция Инструменти за разработчици^{(Developer Tools)} , щракнете върху бутона с двойна стрелка и след това изберете и отворете раздела Мрежа^(Network) от горната лента с менюта. След това презаредете уебсайта, на който сте.

След това щракнете върху категорията Шрифт^(Font) и ще видите списък на вградените шрифтове със съответните имена на шрифтове, присъстващи на уебсайта. Можете да изберете шрифт от списъка и ще видите неговия преглед в специалния панел, както е показано на екранната снимка по-долу.

Сега, как да идентифицираме формата на шрифта? Е^(Well) , просто задръжте курсора на мишката върху шрифта и вижте разширението на файла в края. Вижте екранната снимка по-долу.

След това просто щракнете с десния бутон върху шрифта и след това от контекстното меню щракнете върху опцията Copy > Copy Response .

След това добавете нов раздел във вашия браузър Chrome и поставете копирания отговор в адресната лента в раздела и след това натиснете бутона Enter . Когато направите това, файл ще бъде изтеглен.

Сега отидете в папката за изтегляния^(Downloads) , където се изтегля горният файл с шрифт. Сега трябва да преименувате този файл с разширението на файла на шрифта. За това първо отидете на раздела Изглед^{( View)} във File Explorer и след това се уверете, че сте активирали опцията за разширения на името на файла^{(File name extensions)} . Сега изберете изтегления файл с шрифт и щракнете върху опцията Преименуване^(Rename) . Добавете идентифицираното разширение на файла с шрифт (напр. .woff2 ) и натиснете бутона Enter.

Voila , ето как изтегляте файл с шрифт от уебсайт.

Тъй като Microsoft Edge вече е базиран на Chromium , подобно на Chrome , можете да изтеглите файл с шрифт в браузъра Edge , като следвате същите стъпки, както по-горе.

Надяваме се, че тази статия ви е помогнала да научите как да изтегляте шрифтове от уебсайт в браузъра Chrome^(Chrome) или Edge с помощта на Инструменти за разработчици^{(Developer Tools)} .

СЪВЕТ^(TIP) : Има още много съвети и трикове за инструменти за разработка на Chrome^{(Chrome Development Tools Tips and Tricks)} , които можете да научите.

Сега прочетете: ^{(Now read:)} Използвайте Инструменти за разработчици, за да изчистите данните на сайта за конкретен уебсайт в Chrome или 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

• Идентифицирайте шрифтове в Chrome, Edge и Firefox с помощта на инструменти за разработчици

• Изчистете данните на сайта за конкретен сайт в Chrome или Edge с помощта на инструменти за програмисти

• Как да промените шрифта по подразбиране в браузъра Chrome, Edge, Firefox

• Какво представлява режимът за разработчици на Chrome и какви са неговите приложения?

• Деактивирайте инструментите за разработчици в Edge с помощта на системния регистър или груповите правила

• Поправете диалоговия прозорец за отваряне на замъглен файл в Google Chrome и Microsoft Edge

• Автоматично попълване на Google Chrome: Пълно ръководство

• Как да промените настройките за печат по подразбиране в Google Chrome

• Списък с най-добрите уебсайтове за безплатен онлайн конвертор на шрифтове

• Топ 10 разширения и инструменти за Chrome за уеб дизайнери

• Активирайте преливане на линии в изглед на източник в Chrome или Edge

• Промяна на цветовете на системните елементи и размерите на шрифта в Windows 10

• Какви са различните файлови формати на шрифтове?

• Как да деактивирате или активирате режима на четене в Chrome в Windows 10

• Microsoft Font Maker ви позволява да създавате персонализирани шрифтове безплатно

• Как да промените потребителския агент и геолокацията в Edge Developer Tools

• Как да промените системния шрифт по подразбиране в Windows 11/10

• КОРЕКЦИЯ: reCAPTCHA не работи в Chrome, Firefox или който и да е браузър

• Най-добрите FTP инструменти за прехвърляне на файлове към домейна на вашия уебсайт

• Деактивирайте клавишната комбинация F12 за Microsoft Edge Developer Tools