در این مقاله، در مورد اینکه چگونه می‌توانید فونت‌ها را از وب‌سایت‌ها در مرورگر کروم یا اج با استفاده از ابزارهای توسعه‌دهنده بارگیری کنید^{(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)با استفاده از ابزار برنامه‌نویس کروم^{(Chrome Developer Tools)} ، یک قلم^(Font) را از یک وب‌سایت ^(Website)دانلود کنید

در این پست قصد داریم مراحل دانلود فونت از یک وب سایت در گوگل کروم^{(Google Chrome)} را به شما نشان دهیم . می توانید از همین مراحل برای دانلود فونت وب سایت در مرورگر مایکروسافت اج^{(Microsoft Edge)} استفاده کنید. در اینجا مراحل انجام این کار وجود دارد:

1. Google Chrome را راه اندازی کنید.
2. به وب سایتی بروید که می خواهید فونت ها را از آنجا بارگیری کنید.
3. ابزار Developer Tools را باز کنید.
4. به تب Network بروید.
5. ^(Click)بر روی گزینه Font کلیک کرده و فونتی را برای دانلود انتخاب کنید.
6. فایل فونت را دانلود کنید.
7. نام فایل دانلود شده را با پسوند فایل فونت تغییر دهید.

اجازه دهید این مراحل را با جزئیات بررسی کنیم!

ابتدا Google Chrome را باز کنید و به وب سایتی بروید که از آنجا باید فونت را دانلود کنید. در مرحله بعد^(Next) ، به منوی سه نوار بروید و روی گزینه More Tools > Developer Tools کلیک کنید. همچنین، می‌توانید کلیدهای ترکیبی Ctrl + Shift + I را فشار دهید تا به سرعت پانل ابزارهای توسعه‌دهنده باز شود.^{(Developer Tools)}

حال در قسمت باز شده Developer Tools بر روی دکمه فلش دوتایی کلیک کرده و سپس از نوار منوی بالا تب Network را انتخاب کرده و باز کنید. ^(Network)پس از آن، وب‌سایتی را که در آن هستید بارگیری مجدد کنید.

در مرحله بعد، روی دسته فونت^(Font) کلیک کنید و لیستی از فونت های تعبیه شده را با نام فونت های مربوطه در وب سایت مشاهده خواهید کرد. شما می توانید یک فونت را از لیست انتخاب کنید و پیش نمایش آن را در پنل اختصاصی همانطور که در تصویر زیر نشان داده شده است مشاهده خواهید کرد.

حال، چگونه فرمت فونت را تشخیص دهیم؟ خوب^(Well) ، فقط ماوس را روی فونت ببرید و پسوند فایل را در انتها ببینید. به اسکرین شات زیر مراجعه کنید.

پس از آن، به سادگی بر روی فونت کلیک راست کرده و سپس از منوی زمینه، روی گزینه Copy > Copy Response کلیک کنید.

سپس، یک تب جدید در مرورگر کروم^(Chrome) خود اضافه کنید و پاسخ کپی شده را در نوار آدرس در برگه قرار دهید و سپس دکمه Enter را فشار دهید. با انجام این کار، یک فایل دانلود می شود.

اکنون به پوشه Downloads^(Downloads) خود بروید، جایی که فایل فونت بالا در آن دانلود شده است. اکنون باید نام این فایل را با پسوند فایل فونت تغییر دهید. برای این کار ابتدا به تب View در ^{( View)}File Explorer رفته^{(File Explorer)} و سپس مطمئن شوید که گزینه File name extensions را فعال کرده اید. حال فایل فونت دانلود شده را انتخاب کرده و روی گزینه Rename کلیک کنید. پسوند فایل فونت شناسایی شده را اضافه کنید (به عنوان مثال، woff2 . ) و دکمه Enter را فشار دهید.

Voila ، به این صورت یک فایل فونت را از یک وب سایت دانلود می کنید.

از آنجایی که مایکروسافت اج^{(Microsoft Edge)} اکنون مانند کروم مبتنی بر ^(Chrome)Chromium است، می‌توانید یک فایل فونت را در مرورگر Edge با همان مراحل بالا دانلود کنید.

امیدواریم این مقاله به شما کمک کرده باشد که یاد بگیرید چگونه فونت‌ها را از یک وب‌سایت در مرورگر کروم^(Chrome) یا Edge با استفاده از ابزارهای توسعه‌دهنده^{(Developer Tools)} بارگیری کنید .

نکته^(TIP) : نکات و ترفندهای بیشتری برای ابزارهای توسعه Chrome^{(Chrome Development Tools Tips and Tricks)} وجود دارد که می‌توانید یاد بگیرید.

اکنون بخوانید: ^{(Now read:)} از ابزار Developer Tools برای پاک کردن داده‌های سایت برای یک وب‌سایت خاص در 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

• Identify فونت در Chrome، Edge and Firefox با استفاده از Developer Tools

• پاک کردن Site Data برای سایت خاص در Chrome or Edge با استفاده از Developer Tools

• چگونه برای تغییر Default Font در Chrome، Edge، Firefox browser

• Chrome Developer Mode چیست و چه کاربردهایی دارد؟

• غیر فعال کردن Developer Tools در Edge با استفاده از Registry or Group Policy

• چگونه Default Print Settings را در Google Chrome تغییر دهید

• چگونه به ایجاد یک Desktop Shortcut از Website در Chrome

• نحوه تنظیم سفارشی Keyboard Shortcut به Chrome Extension

• Chrome Development Tools Tutorials، Tips، Tricks

• واردات Bookmarks، Passwords به Chrome از مرورگر دیگر

• 10 بهترین برنامه افزودنی حریم خصوصی برای Chrome (2022)

• چگونه به تغییر پیش فرض System Font در Windows 10

• چگونه Block and Unblock A Website در Google Chrome

• جعبه Fix Blurry File Open dialog در Google Chrome and Microsoft Edge

• Chrome Connectivity Diagnostics Plugin Network Connection شما را آزمایش می کند

• چگونه به Highlight Active Tab در Chrome Browser

• بهترین ابزار FTP برای انتقال فایل ها به دامنه وب سایت شما

• چگونه Destroy Profile در Browser Close در Google Chrome

• چگونه می توانم استفاده کنم Google Input Tools در من ویندوز 10 کامپیوتر؟

• 10 بهترین تم برای Google Chrome Browser