The Toolbox

मुफ़्त वेब फ़ॉन्ट डिटेक्टर

HTML या CSS में उपयोग किए गए सभी फ़ॉन्ट निकालें। Google Fonts, सिस्टम फ़ॉन्ट और वेब फ़ॉन्ट पहचानें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में बिना साइन-अप के काम करता है।

अपडेट किया गया

Share:
Home/Website Tools/Web Font Detector

Web Font Detector

Extract all fonts used in HTML or CSS. Identify Google Fonts, system fonts, custom web fonts, and @font-face declarations.

Paste HTML or CSS Source

Paste your page's HTML (including the <style> blocks and inline styles) or a CSS file. The tool will extract all font references.

Related Tools

Favicon CheckerMeta Tag ExtractorCSS Unit Converter

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

Web Font Detector क्या है?

Web Font Detector एक मुफ़्त ऑनलाइन टूल है जो HTML या CSS में उपयोग किए गए सभी फ़ॉन्ट निकालता है और Google Fonts, सिस्टम फ़ॉन्ट तथा वेब फ़ॉन्ट की पहचान करता है। यह पूरी तरह आपके ब्राउज़र में चलता है, किसी इंस्टॉलेशन या साइन-अप की ज़रूरत नहीं।

मैं फ़ॉन्ट कैसे पहचानूँ?

अपना CSS या HTML स्रोत पेस्ट करें, और टूल सभी font-family घोषणाएँ तथा @font-face नियम निकाल देगा।

क्या यह Google Fonts की पहचान कर सकता है?

हाँ — यह Google Fonts के CDN URL को पहचानता है और उन्हें फ़ॉन्ट नामों से मैप करता है।

क्या यह मुफ़्त है?

हाँ, पूरी तरह मुफ़्त।

क्या इस टूल के साथ मेरा डेटा सुरक्षित है?

बिल्कुल। Web Font Detector सब कुछ आपके ब्राउज़र में क्लाइंट-साइड पर ही प्रोसेस करता है। कोई भी डेटा किसी सर्वर पर अपलोड या संग्रहीत नहीं किया जाता। आपकी सामग्री हर समय आपके डिवाइस पर निजी रहती है।

क्या Web Font Detector मोबाइल डिवाइस पर काम करता है?

हाँ, Web Font Detector पूरी तरह रिस्पॉन्सिव है और स्मार्टफ़ोन व टैबलेट पर काम करता है। आप इसे आधुनिक वेब ब्राउज़र वाले किसी भी डिवाइस पर इस्तेमाल कर सकते हैं, किसी ऐप डाउनलोड की ज़रूरत नहीं।

क्या इस टूल का उपयोग करने के लिए मुझे खाता बनाना होगा?

किसी खाते या पंजीकरण की ज़रूरत नहीं है। बस अपने ब्राउज़र में Web Font Detector खोलें और तुरंत इस्तेमाल शुरू करें। कोई साइन-अप बाधा या उपयोग प्रतिबंध नहीं है।

कौन-से ब्राउज़र समर्थित हैं?

Web Font Detector सभी आधुनिक ब्राउज़र में काम करता है, जिनमें Chrome, Firefox, Safari, Edge और Opera शामिल हैं। बेहतरीन अनुभव के लिए अपने पसंदीदा ब्राउज़र का नवीनतम संस्करण उपयोग करें।

सिस्टम फॉन्ट, वेब फॉन्ट और Google Font में क्या अंतर है?

सिस्टम फॉन्ट पहले से ही विज़िटर के ऑपरेटिंग सिस्टम के साथ आता है — जैसे Arial, Helvetica, Georgia, Segoe UI, और जेनेरिक कीवर्ड्स serif, sans-serif तथा monospace — इसलिए यह बिना कुछ डाउनलोड किए तुरंत लोड हो जाता है। वेब फॉन्ट वह फ़ाइल होती है जिसे साइट खुद सर्व करती है, जो @font-face रूल में घोषित होती है और पेज के साथ होस्ट रहती है; टेक्स्ट रेंडर होने से पहले ब्राउज़र को वह फ़ाइल फ़ेच करनी पड़ती है। Google Font एक ऐसा वेब फॉन्ट है जो Google के CDN यानी fonts.googleapis.com से डिलीवर होता है, जो ओपन सोर्स है और अपने लाइसेंस के तहत इस्तेमाल के लिए मुफ्त है। डिटेक्टर हर मिले टाइपफेस को Google, System, Custom या Unknown के रूप में टैग करता है ताकि आप एक नज़र में बता सकें कि किसमें डाउनलोड लगता है और कौन-सा डिवाइस से मुफ्त में मिलता है। अपना CSS या HTML पेस्ट करें और सारांश पैनल हर श्रेणी की गिनती आपके लिए कर देगा।

मैं किसी वेबसाइट के CSS से यह कैसे पता लगाऊँ कि वह कौन-सा फॉन्ट इस्तेमाल करती है?

पेज खोलें और उसका सोर्स लें — मार्कअप कॉपी करने के लिए अपने ब्राउज़र के View Source या DevTools का इस्तेमाल करें, या किसी कोड एडिटर से सीधे स्टाइलशीट कॉपी करें — फिर उसे डिटेक्टर में पेस्ट करें। पार्सर हर font-family डिक्लेरेशन, "font: bold 16px/1.5 Georgia, serif" जैसे font शॉर्टहैंड, @font-face ब्लॉक्स, और Google Fonts के @import तथा <link> URL स्कैन करता है, फिर नामों को एक डुप्लिकेट-रहित सूची में रिज़ॉल्व करता है। हर एंट्री यह भी दिखाती है कि वह किस सिलेक्टर या संदर्भ में दिखाई दी — यानी आप देख सकते हैं कि कोई टाइपफेस body पर, किसी h1 पर, या किसी इनलाइन स्टाइल में इस्तेमाल हुआ है। सटीक फैमिली नाम पढ़ना टाइपफेस का अंदाज़ा लगाने से कहीं बेहतर है, लेकिन याद रखें कि वेब फॉन्ट्स लाइसेंस-प्राप्त एसेट होते हैं — दोबारा इस्तेमाल करने से पहले लाइसेंस ज़रूर जाँचें। ऊपर किसी साइट का सोर्स पेस्ट करें और सेकंडों में उसकी पूरी फॉन्ट सूची देखें।

परिणामों में कोई फॉन्ट "Unknown" के रूप में क्यों दिखता है?

किसी फॉन्ट को Unknown तब टैग किया जाता है जब उसका नाम लगभग पचास सामान्य सिस्टम फॉन्ट्स की बिल्ट-इन सूची में नहीं होता और वह आपके पेस्ट किए गए सोर्स में किसी Google Fonts CDN URL या @font-face रूल से भी नहीं जुड़ा होता। व्यवहार में इसका आमतौर पर मतलब यह होता है कि यह कोई लाइसेंस-प्राप्त वेब फॉन्ट है जो किसी और तरीके से लोड हुआ, या कोई सेल्फ-होस्टेड फेस है जिसका @font-face ब्लॉक स्निपेट में शामिल नहीं था, या फिर फैमिली नाम में बस एक टाइपो है। यह कोई त्रुटि नहीं है — टूल बता रहा है कि उसे एक वास्तविक नामित टाइपफेस मिला है लेकिन वह पुष्टि नहीं कर सका कि यह कहाँ से आया। अगर कोई फॉन्ट जिसे आप Custom मान रहे थे वह Unknown दिख रहा है, तो स्टाइलशीट का और हिस्सा पेस्ट करें ताकि मेल खाने वाला @font-face ब्लॉक भी शामिल हो जाए। हर फॉन्ट को यथासंभव सटीक रूप से वर्गीकृत करवाने के लिए अपना पूरा CSS पेस्ट करें।

नॉन-सिस्टम फॉन्ट स्टैक क्या है और मुझे इसे क्यों कॉपी करना चाहिए?

फॉन्ट स्टैक पूरा font-family मान होता है — एक प्राइमरी टाइपफेस उसके बाद वे फॉलबैक जिन्हें ब्राउज़र क्रम में आज़माता है, जैसे "Inter, -apple-system, Arial, sans-serif"। नॉन-सिस्टम फॉन्ट स्टैक वही सूची होती है जिसमें से जेनेरिक सिस्टम फॉलबैक हटा दिए गए हों, यानी सिर्फ वे टाइपफेस बचते हैं जिन्हें पेज वास्तव में वेब फॉन्ट के रूप में लोड करता है। डिटेक्टर यह स्टैक आपके लिए बना देता है और इसे एक-क्लिक कॉपी के रूप में पेश करता है, जो तब काम आता है जब आप किसी लेआउट के असली टाइपफेस को उसकी फॉलबैक चेन घसीटे बिना दोबारा इस्तेमाल करना चाहते हों, या यह ऑडिट करना चाहते हों कि कोई पेज ठीक-ठीक किन फॉन्ट्स पर निर्भर है। स्टैक को सिर्फ ज़रूरी फॉन्ट्स तक सीमित रखना परफॉर्मेंस के लिहाज़ से भी फ़ायदेमंद है, क्योंकि हर वेब फॉन्ट एक फ़ाइल होती है जिसे ब्राउज़र को डाउनलोड करना पड़ता है। अपना सोर्स पेस्ट करें और परिणामों से तैयार नॉन-सिस्टम स्टैक कॉपी कर लें।

क्या यह टूल @font-face से लोड हुए फॉन्ट्स को पहचान सकता है, या सिर्फ Google Fonts को?

यह दोनों को पहचानता है, और इससे भी ज़्यादा। पार्सर चार तरह के फॉन्ट संदर्भ हैंडल करता है और उन्हें मिलाकर एक सूची बनाता है: सेल्फ-होस्टेड या कस्टम फॉन्ट्स के लिए @font-face ब्लॉक्स, जिन्हें उनके घोषित फैमिली नाम और src URL के साथ कैप्चर किया जाता है ताकि आप देख सकें कि फ़ाइल कहाँ से लोड होती है; fonts.googleapis.com की ओर इशारा करने वाले Google Fonts के @import url(...) रूल्स और <link> टैग्स, जिनके नाम URL के family पैरामीटर से निकाले जाते हैं; किसी भी CSS रूल या इनलाइन स्टाइल में मानक font-family डिक्लेरेशन; और font शॉर्टहैंड जहाँ साइज़ और फैमिली एक साथ लिखे होते हैं। Google Fonts को उनके स्पेसिमेन पेज का सीधा लिंक मिलता है, और @font-face फॉन्ट्स को उनके सोर्स URL के साथ सूचीबद्ध किया जाता है। चूँकि सब कुछ आपके ब्राउज़र में लोकली चलता है, यह लाइव URL पर नहीं बल्कि आपके पेस्ट किए गए सोर्स पर काम करता है। कोई स्टाइलशीट पेस्ट करें और देखें कि हर फॉन्ट, चाहे वह जैसे भी लोड हो, कैसे पकड़ में आता है।

Embed This Tool

Add a free, live version of this widget to your own website or blog post — it runs entirely in your visitors' browsers, with a credit link back to The Toolbox.

Copy & paste this HTML
<iframe src="https://getthetoolbox.com/embed/font-detector" title="Free Web Font Detector — The Toolbox" width="100%" height="260" style="max-width:480px;border:1px solid #e2e8f0;border-radius:12px" loading="lazy"></iframe>
<p style="font-size:12px;margin:4px 0 0"><a href="https://getthetoolbox.com/website-tools/font-detector?utm_source=embed&utm_medium=widget" target="_blank" rel="noopener">Free Web Font Detector</a> by The Toolbox</p>

संबंधित टूल

मुफ़्त वेबसाइट स्पीड टेस्ट

अपनी वेबसाइट के पेज लोड समय, प्रदर्शन मेट्रिक्स और अनुकूलन के अवसरों का विश्लेषण करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।

मुफ़्त मोबाइल फ्रेंडली टेस्ट

जांचें कि आपकी साइट मोबाइल डिवाइस के लिए अनुकूलित है या नहीं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।

मुफ़्त मेटा टैग एक्सट्रैक्टर

SEO और सोशल मीडिया विश्लेषण के लिए किसी भी वेबपेज से सभी मेटा टैग निकालें और समीक्षा करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में, बिना साइन-अप के।

मुफ़्त वेबसाइट स्क्रीनशॉट टूल

डिज़ाइन समीक्षा और परीक्षण के लिए किसी भी वेबपेज के पूर्ण-पृष्ठ या व्यूपोर्ट स्क्रीनशॉट कैप्चर करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में, बिना साइन-अप के।

सभी वेबसाइट टूल देखें →

वेब फॉन्ट डिटेक्टर के बारे में

वेब फॉन्ट डिटेक्टर किसी पेज के HTML या CSS में से हर टाइपफेस निकालकर आपको ठीक-ठीक दिखाता है कि किसी डिज़ाइन में कौन-कौन से फॉन्ट इस्तेमाल हो रहे हैं। सोर्स पेस्ट करें — एक स्टाइलशीट, कोई <style> ब्लॉक, या इनलाइन स्टाइल वाला पूरा पेज मार्कअप — और यह टूल हर font-family डिक्लेरेशन को निकालकर, नामों को रिज़ॉल्व करके उन्हें Google Fonts, सिस्टम फॉन्ट्स और कस्टम वेब फॉन्ट्स में बाँट देता है। किसी लेआउट को रिवर्स-इंजीनियर करने वाले डिज़ाइनर, विरासत में मिली स्टाइलशीट ऑडिट करने वाले डेवलपर, या यह जानने के इच्छुक कोई भी व्यक्ति कि प्रतिस्पर्धी किस फॉन्ट का इस्तेमाल कर रहा है — सभी को कुछ ही सेकंड में जवाब मिल जाता है।

यह लाइव URL पर नहीं, बल्कि आपके द्वारा पेस्ट किए गए सोर्स पर काम करता है, यानी विश्लेषण के लिए क्या इस्तेमाल होगा इस पर आपका पूरा नियंत्रण रहता है: अपने कोड एडिटर से सीधे CSS कॉपी करें, या किसी भी खुले पेज का मार्कअप लेने के लिए ब्राउज़र के "View Source" / DevTools का इस्तेमाल करें। सब कुछ आपके ब्राउज़र में ही लोकली पार्स होता है। आप जो कुछ भी पेस्ट करते हैं वह न तो अपलोड होता है, न लॉग होता है, न ही किसी सर्वर पर स्टोर होता है, कोई साइन-अप नहीं है, और आप कितना भी पेस्ट करें उसकी कोई सीमा नहीं है।

डिटेक्टर क्या-क्या ढूँढता है

पार्सर आपके सोर्स में कई तरह के फॉन्ट संदर्भ खोजता है और उन्हें मिलाकर एक डुप्लिकेट-रहित सूची बना देता है:

  • font-family डिक्लेरेशन — हर CSS रूल और इनलाइन स्टाइल, साथ ही वह सिलेक्टर या संदर्भ जिसमें हर फॉन्ट दिखाई देता है (जैसे body, h1, या inline style)।
  • @font-face ब्लॉक — सेल्फ-होस्टेड या कस्टम फॉन्ट्स, जिन्हें उनके घोषित फैमिली नाम और src URL के साथ कैप्चर किया जाता है ताकि आप देख सकें कि फॉन्ट फ़ाइल कहाँ से लोड हो रही है।
  • Google Fonts लिंक — fonts.googleapis.com की ओर इशारा करने वाले @import url(...) रूल्स और <link> टैग्स को पहचाना जाता है, और फैमिली नाम सीधे URL के family पैरामीटर से निकाले जाते हैं।
  • font शॉर्टहैंड — font: bold 16px/1.5 "Georgia", serif जैसे मान भी पार्स किए जाते हैं ताकि साइज़ और फैमिली एक साथ लिखे होने पर भी टाइपफेस छूटे नहीं।

फॉन्ट्स को कैसे वर्गीकृत किया जाता है

हर पहचाने गए फॉन्ट को चार प्रकारों में से किसी एक टैग से चिह्नित किया जाता है ताकि आप एक नज़र में समझ सकें कि आप किससे डील कर रहे हैं:

  • Google — किसी मान्यता-प्राप्त Google Fonts CDN URL से मिलान होने पर; इनमें fonts.google.com पर संबंधित स्पेसिमेन पेज का सीधा लिंक शामिल होता है।
  • System — ऐसा फॉन्ट जो आम ऑपरेटिंग सिस्टम्स के साथ आता है या किसी मानक स्टैक में मौजूद रहता है, जिसे लगभग पचास नामों की एक बिल्ट-इन सूची — जैसे Arial, Helvetica, Georgia, Segoe UI, Roboto — और जेनेरिक कीवर्ड्स serif, sans-serif तथा monospace के आधार पर पहचाना जाता है।
  • Custom — कोई ऐसा फेस जो @font-face रूल में घोषित किया गया हो, यानी साइट स्वयं उस फॉन्ट फ़ाइल को होस्ट करती है।
  • Unknown — एक नाम वाला फॉन्ट जो न तो किसी ज्ञात सिस्टम फॉन्ट से मेल खाता है और न ही किसी Google या @font-face स्रोत से जुड़ा है, इसलिए यह कोई लाइसेंस-प्राप्त वेब फॉन्ट, कोई टाइपो, या किसी और तरीके से लोड किया गया फेस हो सकता है।

एक सारांश पैनल हर श्रेणी की गिनती दिखाता है, और यह टूल एक तैयार नॉन-सिस्टम फॉन्ट स्टैक भी बनाता है — यानी font-family वैल्यू जिसमें से सिस्टम फॉलबैक हटा दिए गए हों — जिसे आप एक क्लिक में कॉपी कर सकते हैं।

फॉन्ट्स का पता लगाना क्यों उपयोगी है

फॉन्ट्स इस बात को तय करते हैं कि कोई साइट कैसी दिखती है और कितनी तेज़ी से लोड होती है। हर वेब फॉन्ट एक फ़ाइल होती है जिसे ब्राउज़र को डाउनलोड करना पड़ता है, और बिना अनुकूलित फॉन्ट लोडिंग लेआउट शिफ्ट और धीमे टेक्स्ट रेंडरिंग का एक आम कारण है। किसी पेज द्वारा इस्तेमाल किए जाने वाले हर फॉन्ट को देखना — और यह जानना कि वे Google के CDN से आ रहे हैं, किसी सेल्फ-होस्टेड फ़ाइल से, या विज़िटर की अपनी डिवाइस से — उन फॉन्ट्स को हटाने की दिशा में पहला कदम है जिनकी आपको ज़रूरत नहीं है।

पसंद आए किसी लुक से मिलान करने के लिए भी यह डिटेक्टर उतना ही उपयोगी है। किसी टाइपफेस का अंदाज़ा आँख से लगाने के बजाय, आप CSS से सीधे सटीक फैमिली नाम पढ़ सकते हैं, फिर उसे दोबारा इस्तेमाल करने से पहले लाइसेंसिंग जाँच सकते हैं। वेब फॉन्ट्स लाइसेंस-प्राप्त एसेट होते हैं: Google Fonts ओपन सोर्स हैं और इस्तेमाल करने के लिए मुफ्त हैं, लेकिन किसी और की स्टाइलशीट में दिखने वाले कस्टम या लाइसेंस-प्राप्त फेस के लिए आमतौर पर अपनी साइट पर लगाने से पहले उसका अपना लाइसेंस चाहिए होता है।