List All Fonts যেকোনো ওয়েবপেজ স্ক্যান করে এবং সেখানে ব্যবহৃত প্রতিটি ফন্ট ফ্যামিলির একটি পূর্ণাঙ্গ তালিকা প্রদান করে — যেমন CDN থেকে লোড করা ওয়েব ফন্ট, সেলফ-হোস্টেড ফন্ট এবং সিস্টেম ফন্ট ফলব্যাক। প্রতিটি ফন্টের সাথে একটি লাইভ টেক্সট প্রিভিউ, লোড হওয়া ফন্ট ওয়েট ও স্টাইল, এটি ব্যবহার করা এলিমেন্টের সংখ্যা এবং এক ক্লিকে CSS font-family ডিক্লারেশন কপি করার সুবিধা থাকে।
আপনার পছন্দের কোনো ওয়েবসাইটে ব্যবহৃত ফন্টগুলো শনাক্ত করার জন্য আগে হয়তো ডেভটুলস-এ (DevTools) একে একে এলিমেন্টগুলো চেক করতে হতো অথবা ব্রাউজার এক্সটেনশন ব্যবহার করতে হতো যা কেবল একটি করে ফন্ট শনাক্ত করতে পারতো। List All Fonts আপনাকে এক নজরে পুরো চিত্রটি দেখার সুযোগ দেয় — পেজে ব্যবহৃত প্রতিটি ফন্ট এবং সেগুলো দেখতে কেমন তার লাইভ স্যাম্পল এখানে পাওয়া যায়। টুলটি ওয়েব ফন্ট (@font-face বা Google Fonts-এর মাধ্যমে লোড হওয়া) এবং সিস্টেম ফন্ট (Arial, Helvetica, Georgia ইত্যাদি) আলাদা করে দেখায় এবং পূর্ণাঙ্গ ফন্ট ফ্যামিলি স্ট্যাক প্রদর্শন করে। প্রতিটি ফন্টের জন্য আপনি দেখতে পাবেন কোন কোন ওয়েট লোড করা হয়েছে (৪০০, ৬০০০, ৭০০), কোন এলিমেন্টগুলো এটি ব্যবহার করছে এবং কোন ফন্ট সাইজগুলো প্রয়োগ করা হয়েছে। আপনার নিজের প্রোজেক্টে ব্যবহার করার জন্য যেকোনো ফন্টের CSS ডিক্লারেশন এক ক্লিকেই কপি করুন। লাইভ প্রিভিউতে পেজের আসল ফন্ট রেন্ডারিং ব্যবহার করা হয়, কোনো সাধারণ প্রিভিউ নয়; তাই সাইটে ফন্টটি যে সাইজ বা ওয়েটে ব্যবহৃত হয়েছে, আপনি ঠিক তেমনই দেখতে পাবেন।
পেজে রেন্ডার হওয়া প্রতিটি ফন্ট ফ্যামিলির তালিকা দেয়, যার মধ্যে রয়েছে Google Fonts, Adobe Fonts, কাস্টম @font-face ডিক্লারেশন এবং সিস্টেম ফন্ট ফলব্যাক। পেজে মোট কতগুলো ইউনিক ফন্ট ফ্যামিলি পাওয়া গেছে তা দেখায়।
পেজে লোড হওয়া আসল ফন্ট ফাইল ব্যবহার করে প্রতিটি ফন্টের একটি লাইভ টেক্সট স্যাম্পল ("The quick brown fox jumps over the lazy dog") প্রদর্শিত হয়। আপনি আসল রেন্ডারিং দেখতে পাবেন — কোনো সাধারণ বা জেনেরিক প্রিভিউ নয়।
প্রতিটি ফন্টের জন্য দেখুন কোন কোন ওয়েট লোড করা হয়েছে (Regular 400, Medium 500, SemiBold 600, Bold 700) এবং সেগুলোর ইটালিক ভার্সন আছে কি না। এটি আপনাকে ফন্টের লোড হওয়া সাবসেটগুলো বুঝতে সাহায্য করবে।
পেজের কতগুলো এলিমেন্ট প্রতিটি ফন্ট ব্যবহার করছে তা দেখুন। সবচেয়ে বেশি ব্যবহৃত ফন্টটি তালিকার প্রথমে থাকে। এর মাধ্যমে আপনি বুঝতে পারবেন কোন ফন্টগুলো প্রধান (বডি টেক্সট) এবং কোনগুলো গৌণ (খুব কম ব্যবহৃত)।
যেকোনো ফন্ট এন্ট্রিতে ক্লিক করে এর পূর্ণাঙ্গ CSS font-family ডিক্লারেশন (যেমন, font-family: 'Inter', sans-serif) ক্লিপবোর্ডে কপি করুন। আপনার স্টাইলশিটে সরাসরি পেস্ট করার জন্য এটি এখন প্রস্তুত।
প্রতিটি ফন্টের সোর্স বা উৎস এখানে পাওয়া যায়: যেমন Google Fonts (নির্দিষ্ট URL সহ), Adobe Fonts, সেলফ-হোস্টেড (@font-face URL সহ) অথবা সিস্টেম ফন্ট। অর্থাৎ প্রতিটি ফন্ট ঠিক কোথা থেকে আসছে তা আপনি জানতে পারবেন।
চমৎকার টাইপোগ্রাফি সমৃদ্ধ কোনো ওয়েবসাইট ভিজিট করুন এবং তাৎক্ষণিকভাবে সেখানে ব্যবহৃত প্রতিটি ফন্ট — ফন্টের নাম, ওয়েট এবং সোর্স দেখে নিন। "এটি কোন ফন্ট?" — এমন আন্দাজ করা বা অনির্ভরযোগ্য টুল ব্যবহার করার দিন শেষ।
আপনার পেজ কতগুলো ফন্ট লোড করছে? এমন কোনো ফন্ট কি ডাউনলোড হচ্ছে যা কোথাও ব্যবহৃত হয়নি? List All Fonts আপনাকে প্রকৃত ব্যবহার দেখায় — যদি কোনো লোড হওয়া ফন্ট একটি এলিমেন্টও ব্যবহার না করে, তবে তা কেবল ব্যান্ডউইথ নষ্ট করছে।
প্রতিটি পেজে List All Fonts চালিয়ে আপনার প্রোজেক্টের টাইপোগ্রাফি ডকুমেন্ট করুন। পুরো সাইটে সঠিক ফন্ট এবং ওয়েটগুলো ধারাবাহিকভাবে ব্যবহৃত হচ্ছে কি না তা যাচাই করুন — কোনো ভুল ফন্ট ডিক্লারেশন থাকলে তা শনাক্ত করুন।
আপনার পছন্দের কোনো ফন্ট খুঁজে পেয়েছেন কিন্তু সেটি কি পেইড ফন্ট? ফন্টের নাম কপি করুন এবং একই বৈশিষ্ট্যের ফ্রি ফন্টগুলো সার্চ করুন। লাইভ প্রিভিউটি আপনাকে মনে রাখতে সাহায্য করবে যে ফন্টটি আসলে দেখতে কেমন ছিল।
একই পেজ ভিন্ন ভিন্ন ব্রাউজারে ওপেন করে List All Fonts চালান যাতে সবখানে একই ফন্ট রেন্ডার হচ্ছে কি না তা নিশ্চিত হওয়া যায়। বিভিন্ন অপারেটিং সিস্টেমে সিস্টেম ফন্ট স্ট্যাকগুলো আলাদাভাবে কাজ করতে পারে — আপনার ডিজাইনের অসামঞ্জস্যগুলো এর মাধ্যমে খুঁজে বের করুন।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং List All Fonts আইকনে ক্লিক করুন। টুলটি পেজের কম্পিউটেড স্টাইল এবং @font-face রুলগুলো স্ক্যান করবে।
একটি প্যানেলে পেজে পাওয়া সব ফন্টের তালিকা প্রদর্শিত হবে, যা ব্যবহারের হার অনুযায়ী সাজানো থাকে। প্রতিটি এন্ট্রিতে ফন্টের নাম, প্রিভিউ টেক্সট, ওয়েট এবং এলিমেন্ট কাউন্ট দেখানো হয়।
প্রতিটি ফন্ট কেমন রেন্ডার হচ্ছে তা দেখতে লাইভ প্রিভিউগুলো স্ক্রল করুন। পেজের হেডিং ফন্ট বনাম বডি ফন্ট বনাম অ্যাকসেন্ট ফন্টের মধ্যে তুলনা করুন।
যেকোনো ফন্ট এন্ট্রিতে ক্লিক করে এর font-family CSS ডিক্লারেশন কপি করুন। ফন্টের উৎস ভিজিট করতে সোর্স লিঙ্কে ক্লিক করুন (যেমন Google Fonts পেজ, CDN URL ইত্যাদি)।
আপনার নিজের প্রোজেক্টে ফন্টটি ব্যবহার করতে font-family ডিক্লারেশনটি আপনার CSS-এ পেস্ট করুন এবং একই সোর্স থেকে ফন্টটি লোড করুন।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
