Chrome और Firefox DevTools से फ़ॉन्ट खोजें

Browser DevTools किसी भी element पर render हुए सटीक font की जांच करने देता है। इसका उपयोग कैसे करें - और URL scanner कब बेहतर विकल्प है।

Chrome DevTools - Rendered Fonts

  1. 1पेज पर किसी भी text पर right-click करें और Inspect चुनें (या Ctrl+Shift+I / Cmd+Option+I दबाएं)।
    Chrome right-click context menu में Inspect नीले रंग में highlight है
    पूरा screenshot देखें
    किसी भी text पर right-click करें, फिर Inspect click करें
  2. 2Chrome Elements panel खोलता है जिसमें clicked element DOM tree में highlight होता है।
  3. 3दाएं panel में Computed tab (Styles के बगल में दूसरा tab) click करें।
  4. 4CSS properties के नीचे scroll करके Rendered Fonts section तक जाएं।
    Chrome DevTools Computed tab में Rendered Fonts: woff2 file से Inter Variable
    पूरा screenshot देखें
    Computed tab - "Rendered Fonts" तक scroll करें
  5. 5आप देख सकते हैं browser ने कौन सा typeface उपयोग किया, source file कौन सी है और कितने glyphs render हुए।

Firefox DevTools - Fonts Tab

  1. 1किसी भी text पर right-click करें और Inspect चुनें (या F12 दबाएं)। Inspector panel खुलता है।
  2. 2Inspector के दाएं panel में (जहां Rules और Computed दिखते हैं) Fonts tab click करें।
  3. 3बाएं column में page पर load हुए सभी fonts की list है। Font का नाम click करके specimen, weight range, format और source URL देखें।
    Firefox DevTools Fonts tab - Inter Variable selected, specimen और details दिख रहे हैं
    पूरा screenshot देखें
    Firefox Fonts tab - सभी page fonts बाईं ओर, details दाईं ओर

DevTools approach की सीमाएं

DevTools individual elements की जांच के लिए बढ़िया है, लेकिन page पर load हुए हर font की complete inventory नहीं देता। इसके लिए हर text element manually click करना होगा। पूरे audit के लिए - नीचे URL paste करें।

तेज़ तरीका: URL से पूरे page को scan करें

कोई भी URL paste करें और एक scan में सभी web fonts की complete list पाएं - हर @font-face rule, Google Fonts import और CDN link।

अक्सर पूछे जाने वाले सवाल

Chrome में "Rendered Fonts" क्या है?

Rendered Fonts वह actual typeface दिखाता है जिसे browser ने selected text draw करने के लिए उपयोग किया - font-family fallbacks apply करने के बाद। यह CSS font-family declaration से अलग हो सकता है।

Rendered font CSS font-family से अलग क्यों होता है?

font-family एक prioritised fallback list है। अगर पहला font load नहीं होता (missing file, CORS error), browser अगले candidate पर जाता है। Rendered Fonts वास्तव में उपयोग हुआ font दिखाता है।

क्या DevTools से page के सभी fonts मिल सकते हैं?

Firefox का Fonts tab page पर load हुए हर font को दिखाता है। Chrome में elements एक-एक करके inspect करने होते हैं। Complete automated inventory के लिए ऊपर URL scanner उपयोग करें।

क्या URL scanner Google Fonts भी detect करता है?

हां - सभी font sources detect होते हैं: Google Fonts, Bunny Fonts, Fontshare और self-hosted @font-face fonts।

Font checker पर वापस जाएं