फ़ॉन्टलेन्स

Chrome के लिए मुफ़्त एक्सटेंशन

यह कौन-सा font है? राइट-क्लिक करें और CSS देखें

किसी भी वेबसाइट पर टेक्स्ट चुनें, राइट-क्लिक करें और “Inspect font with FontLens” चुनें। पेज पर font inspector खुलेगा और family, आकार, मोटाई, line-height व रंग दिखाएगा। CSS कॉपी करें या font डाउनलोड करें।

Chrome में जोड़ें — मुफ़्त

Edge, Brave, Opera और दूसरे Chromium ब्राउज़र में भी काम करता है।

FontLens inspector: cap-height, x-height और baseline गाइड के बीच Ag नमूना, font की जानकारी और Tailwind कोड

एक नज़र में

यह क्या करता है
चुने गए टेक्स्ट का font दिखाता है: family, आकार, मोटाई, line-height, रंग और डिफ़ॉल्ट से अलग दूसरी शैलियाँ; CSS कॉपी करने के लिए तैयार रहता है।
शुरू कैसे करें
टेक्स्ट चुनें, राइट-क्लिक करें और “Inspect font with FontLens” चुनें। मेनू विकल्प सिर्फ़ टेक्स्ट चुने होने पर दिखता है।
किस रूप में कॉपी करें
CSS, SCSS, SASS या Tailwind; आकार px, rem, pt या em में रखें।
Font फ़ाइल
“Download font” वेब font को उसके @font-face स्रोत से लाता है। इस्तेमाल से पहले font का लाइसेंस जाँचें।
किनके लिए
वेब डिज़ाइनर, front-end डेवलपर, accessibility ऑडिटर और CSS सीख रहे विद्यार्थी।
कीमत
मुफ़्त। कोई अकाउंट नहीं, कोई पेड वर्ज़न नहीं।
डेटा
आपके ब्राउज़र में चलता है। कोई सर्वर या analytics नहीं। यह सिर्फ़ आपके शुरू किए font डाउनलोड के लिए अनुरोध करता है।
कहाँ काम करता है
Chrome और Chrome Web Store से एक्सटेंशन इंस्टॉल करने वाले दूसरे Chromium ब्राउज़र में। Firefox या Safari में नहीं।
सीमाएँ
वेब पेज पर असली टेक्स्ट का CSS पढ़ता है। इमेज, canvas या PDF के टेक्स्ट और Chrome के अपने पेज नहीं पढ़ता।
वर्ज़न
2.2.0, 23 अक्टूबर 2026 को अपडेट किया गया

दो क्लिक में font पाएँ

  1. 1

    टेक्स्ट चुनें

    किसी भी वेब पेज का शीर्षक, पैराग्राफ़ या बटन का टेक्स्ट।

  2. 2

    राइट-क्लिक करें

    “Inspect font with FontLens” चुनें। पेज पर खुला inspector family, आकार, मोटाई, line-height और रंग दिखाता है।

  3. 3

    कॉपी करें या बदलें

    CSS या Tailwind कॉपी करें, लाइव प्रीव्यू में दूसरा आकार या रंग आज़माएँ, या font फ़ाइल डाउनलोड करें।

लोग इसे क्यों खोलते हैं

Aa

Typeface का नाम जानें

कोई पसंदीदा हेडलाइन दिखी? उसे चुनें और font family, मोटाई व स्रोत देखें: Google Fonts, Adobe Fonts या वही वेबसाइट।

{ }

मॉकअप से मिलाएँ

लाइव पेज के मानों की डिज़ाइन फ़ाइल से तुलना करें, फिर नियम CSS, SCSS, SASS या Tailwind के रूप में कॉपी करें।

4.5:1

Contrast जाँचें

AA और AAA संकेतों के साथ contrast ratio देखें। डिज़ाइन पूरा करने से पहले गहरा टेक्स्ट या हल्का बैकग्राउंड आज़माएँ।

यह क्या करता है

  • गाइड के साथ नमूना

    Font stack की पहली family को cap-height, x-height और baseline गाइड के बीच दिखाता है; माप font से ही लिए जाते हैं।

  • कोड के फ़ॉर्मैट

    CSS, SCSS, SASS और Tailwind। पूरा कोड या एक पंक्ति कॉपी करें; पिछला फ़ॉर्मैट याद रखा जाता है।

  • अपनी इकाइयाँ

    फ़ील्ड और कोड में आकार px, rem, pt या em में दिखाएँ। rem पेज के अपने root आकार के अनुसार होता है।

  • Font स्रोत

    बैज बताता है कि font कहाँ से आया है: Google Fonts, Adobe Fonts, वेबसाइट से या आपके कंप्यूटर पर पहले से मौजूद सिस्टम font।

  • Contrast जाँच

    टेक्स्ट और बैकग्राउंड का ratio, सामान्य और बड़े टेक्स्ट के लिए AA और AAA संकेतों के साथ दिखता है। रंग बदलते ही अपडेट होता है।

  • Font डाउनलोड करें

    @font-face स्रोत से फ़ाइल लेकर family के नाम से सहेजता है। सर्वर रोक दे, तो स्रोत नए टैब में खुलता है।

DevTools में font ढूँढने में समय क्यों लगता है?

पेज कई fonts की सूची देता है और ब्राउज़र उनमें से पहला उपलब्ध font इस्तेमाल करता है। कौन-सा है, यह जानने के लिए DevTools खोलें, element ढूँढें, Computed पैनल पढ़ें और फिर Network पैनल में font फ़ाइल खोजें। आकार, मोटाई, line-height और रंग अलग-अलग जगह होते हैं।

FontLens चुने गए टेक्स्ट की computed style पढ़कर सब कुछ एक पैनल में रखता है: family stack, पहली family का नमूना, माप, font स्रोत और CSS। यह पेज का CSS पढ़ता है, इसलिए इमेज में मौजूद font का नाम नहीं बता सकता।

आपके ब्राउज़र से कुछ बाहर नहीं जाता

  • कोई अकाउंट या सर्वर नहीं

    FontLens आपके ब्राउज़र में चलता है। कोई analytics या tracking नहीं।

  • आपके चुने टेक्स्ट को पढ़ता है

    Inspector उस टेक्स्ट की शैलियाँ पढ़ता है जिस पर आपने राइट-क्लिक किया। पेज की कोई जानकारी कहीं नहीं भेजी जाती।

  • चार अनुमतियाँ

    राइट-क्लिक विकल्प के लिए context menu, inspector खोलने के लिए active tab और page access, और आपका नमूना टेक्स्ट, इकाई व कोड फ़ॉर्मैट सहेजने के लिए storage।

Chrome DevTools बनाम FontLens

Chrome DevTools बनाम FontLensChrome DevToolsFontLens
टेक्स्ट का font ढूँढेंInspect करें, element ढूँढें, Computed पैनल खोलेंटेक्स्ट चुनें, राइट-क्लिक करें, एक मेनू विकल्प
Tailwind या SCSS के रूप में कॉपी करेंनहीं, मान एक-एक करके कॉपी करेंCSS, SCSS, SASS या Tailwind टैब
Font कहाँ से आयाNetwork पैनल में font फ़ाइल खोजेंबैज: Google Fonts, Adobe Fonts, वेबसाइट या सिस्टम
Font फ़ाइल डाउनलोड करेंNetwork या Sources में ढूँढकर सहेजेंएक बटन
Contrast जाँचेंStyles पैनल के color picker मेंलाइव प्रीव्यू के साथ AA और AAA संकेत
कीमतपहले से शामिलमुफ़्त

सवाल

वेबसाइट कौन-सा font इस्तेमाल करती है, कैसे पता करें?

FontLens को Chrome में जोड़ें, साइट का टेक्स्ट चुनें, राइट-क्लिक करें और “Inspect font with FontLens” चुनें। आपको font family, आकार, मोटाई, line-height, रंग और स्रोत दिखेगा।

वेबसाइट से font का CSS कैसे कॉपी करें?

Inspector में CSS, SCSS, SASS या Tailwind टैब चुनें और “Copy all” दबाएँ, या एक पंक्ति कॉपी करें। ज़रूरत हो तो पहले इकाई px, rem, pt या em चुन लें।

क्या वेबसाइट से font डाउनलोड कर सकते हैं?

टेक्स्ट वेब font इस्तेमाल करता हो, तो “Download font” फ़ाइल को उसके @font-face स्रोत से लाता है। सिस्टम font डाउनलोड नहीं होता। अपने प्रोजेक्ट में इस्तेमाल से पहले उसका लाइसेंस जाँचें।

क्या FontLens इमेज या PDF में font पहचानता है?

नहीं। यह वेब पेज के असली टेक्स्ट का CSS पढ़ता है, इसलिए इमेज, canvas या PDF में fonts का नाम नहीं बता सकता।

WCAG के लिए टेक्स्ट contrast कैसे जाँचें?

प्रीव्यू टेक्स्ट और बैकग्राउंड के रंगों का contrast ratio, सामान्य और बड़े टेक्स्ट के AA और AAA संकेतों के साथ दिखाता है। कोई भी रंग बदलें, संकेत अपडेट हो जाते हैं।

क्या px की जगह rem में आकार दिखा सकता है?

हाँ। इकाई px, rem, pt या em चुनें; फ़ील्ड और कोड उसी के अनुसार बदलेंगे। rem पेज के root font-size से निकाला जाता है और आपकी पसंद याद रखी जाती है।

क्या यह मुफ़्त है? क्या डेटा इकट्ठा करता है?

यह मुफ़्त है और अकाउंट नहीं माँगता। कोई सर्वर या analytics नहीं; सिर्फ़ आपके शुरू किए font डाउनलोड का अनुरोध होता है।

क्या यह Edge, Brave या Opera में काम करता है?

Edge, Brave, Opera और Vivaldi समेत ज़्यादातर Chromium ब्राउज़र Chrome Web Store से एक्सटेंशन इंस्टॉल करते हैं। Firefox और Safari समर्थित नहीं हैं।

PYROCTAL के और भी मुफ़्त एक्सटेंशन

यह कौन-सा font है? दो क्लिक में जानें।

Chrome में जोड़ें — मुफ़्त