في هذه المقالة ، سنتحدث عن كيفية تنزيل الخطوط من مواقع الويب في 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 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)}

الآن ، في قسم 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 أو متصفح 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

• Identify الخطوط في Chrome، Edge and Firefox استخدام Developer Tools

• مسح Site Data لموقع معين في Chrome or Edge باستخدام Developer Tools

• كيفية تغيير Default Font في Chrome، Edge، Firefox browser

• ما هو وضع مطور Chrome وما هي استخداماته؟

• تعطيل Developer Tools في Edge باستخدام Registry or Group Policy

• صندوق Fix Blurry File Open dialog في Google Chrome and Microsoft Edge

• كيفية تغيير User Agent and Geolocation في Edge Developer Tools

• أفضل 10 إضافات وأدوات لمتصفح Chrome لمصممي الويب

• Advanced System Font Changer يتيح لك تغيير System Font في Windows

• PassProtect تتأكد من أنك لا تستخدم كلمات المرور التي تم اختراقها بالفعل

• يتيح لك Microsoft Font Maker إنشاء خطوط مخصصة مجانا

• أفضل أدوات FTP لنقل الملفات إلى مجال موقع الويب الخاص بك

• كيفية تغيير الافتراضي System Font في Windows 10

• كيفية تعيين مخصص Keyboard Shortcut إلى Chrome Extension

• تمكين مصادقة PIN أقل لمضيفين Remote Access في Chrome

• تعطيل، إلغاء تثبيت Adobe Flash، Shockwave في Chrome، Firefox، Edge، أي

• فشل Chrome update مع رموز الخطأ 3، 4، 7، 10، 11، 12، الخ

• كيفية Destroy Profile على Browser Close في Google Chrome

• كيفية تغيير Default Print Settings في Google Chrome

• استيراد Bookmarks، Passwords إلى Chrome من متصفح آخر