ফন্ট পেয়ারিং এক্সপ্লোরার

ফন্ট পেয়ারিং এক্সপ্লোরার কী?

ফন্ট পেয়ারিং এক্সপ্লোরার ওয়েব ডিজাইনার, ডেভেলপার ও কনটেন্ট নির্মাতাদের জন্য একটি বিনামূল্যের ইন-ব্রাউজার টুল, যাঁরা ফন্ট লাইব্রেরি না ঘেঁটে শিরোনাম ও মূল লেখার পরিপাটি সংমিশ্রণ চান। দুটি স্বাধীন, অনুসন্ধানযোগ্য পিকার আপনাকে 48টি বাছাই করা Google Fonts-কে serif, sans, display বা mono অনুসারে ফিল্টার করে প্রতিটি ভূমিকার জন্য একটি ফন্ট বেছে নিতে দেয়, আর প্রতি-ভূমিকা নিয়ন্ত্রণ ওজন, আকার, লাইন-উচ্চতা ও অক্ষর-ব্যবধান নির্ধারণ করে। একটি লাইভ প্রিভিউ আপনার শিরোনাম ও অনুচ্ছেদকে আসল ফন্টে রেন্ডার করে, আর অনুপ্রেরণা দরকার হলে শাফল বোতাম এলোমেলো সংমিশ্রণ প্রস্তাব করে। পছন্দ হলে, জেনারেট করা CSS আপনার পছন্দের ফরম্যাটে কপি করুন — একটি @import নিয়ম, একটি HTML link ট্যাগ বা Fontsource-ধাঁচের npm ইমপোর্ট — এবং সেটি ল্যান্ডিং পেজ, ব্লগ থিম, স্লাইড ডেক বা ডিজাইন সিস্টেমে বসান।

ফন্ট পেয়ারিং এক্সপ্লোরার কীভাবে ব্যবহার করবেন

1. শিরোনাম পিকারে serif, sans, display বা mono অনুসারে ফিল্টার করুন, খুঁজতে টাইপ করুন, এবং বেছে নিতে কোনো ফন্টে ক্লিক করুন।
2. অনুচ্ছেদ লেখার জন্য একটি পরিপূরক টাইপফেস বাছতে মূল লেখার পিকারেও একই কাজ করুন।
3. প্রতিটি ভূমিকার ওজন, আকার, লাইন-উচ্চতা ও অক্ষর-ব্যবধান নির্ধারণে সেটিংস খুলুন।
4. নমুনা ঘরে নিজের শিরোনাম ও বাক্য টাইপ করুন, অথবা ডিফল্ট লেখা ব্যবহারে খালি রাখুন; এলোমেলো সংমিশ্রণের আইডিয়ার জন্য শাফল চাপুন।
5. আউটপুট ফরম্যাট বেছে নিন — @import, <link> বা Fontsource — এবং জেনারেট করা CSS আপনার স্টাইলশিট বা প্রকল্পে কপি করুন।

উদাহরণ

শিরোনাম: Playfair Display 700 · মূল লেখা: Source Sans 3 400

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap');

ফরম্যাট: <link>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Lora:wght@600&display=swap" rel="stylesheet">

সচরাচর জিজ্ঞাসিত প্রশ্ন

দুটি ফন্ট কীভাবে বেছে নেব?

প্রতিটি ভূমিকার নিজস্ব পিকার আছে। ক্যাটালগকে serif, sans, display বা mono অনুসারে ফিল্টার করুন, খুঁজতে কোনো ফ্যামিলি নামের অংশ টাইপ করুন, এবং বেছে নিতে ফলাফলে ক্লিক করুন। শিরোনাম ও মূল লেখা আলাদাভাবে বেছে নেওয়া হয়, আর শাফল বোতাম আপনার জন্য এলোমেলো একটি জোড়া বেছে দেয়।

আমি কি ওজন, আকার, লাইন-উচ্চতা ও অক্ষর-ব্যবধান নিয়ন্ত্রণ করতে পারি?

হ্যাঁ। শিরোনাম ও মূল লেখার জন্য আলাদাভাবে ওজন, পিক্সেলে আকার, লাইন-উচ্চতা ও অক্ষর-ব্যবধান (em-এ) নির্ধারণে সেটিংস খুলুন। প্রতিটি পরিবর্তন লাইভ প্রিভিউ ও কপি করা CSS দুটোতেই দেখা যায়।

কোন কোন আউটপুট ফরম্যাট কপি করতে পারি?

তিনটি: একটি CSS @import নিয়ম, preconnect ইঙ্গিতসহ একটি HTML <link> ট্যাগ, এবং Fontsource-ধাঁচের npm ইমপোর্ট (npm i @fontsource/… এবং প্রতি-ওজন ইমপোর্ট লাইন)। তিনটিতেই h1–h3 ও body-র জন্য একই font-family, ওজন, আকার, লাইন-উচ্চতা ও অক্ষর-ব্যবধান নিয়ম থাকে।

ফন্ট কোথা থেকে আসে, আর আমার লেখা কি ব্যক্তিগত?

আপনি যখন একটি পেয়ারিং বেছে নেন, আপনার ব্রাউজার কেবল সেই দুটি ফ্যামিলি সরাসরি fonts.googleapis.com-এ Google-এর সর্বজনীন Fonts CSS API থেকে লোড করে — এটি আপনার ব্রাউজার থেকে করা একটি তৃতীয়-পক্ষের অনুরোধ, আমাদের সার্ভারের মাধ্যমে নয়। আপনার নমুনা টেক্সট ও সেটিংস সম্পূর্ণভাবে আপনার ডিভাইসে থাকে।

কোন কোন ফন্ট অন্তর্ভুক্ত?

serif, sans-serif, display ও monospace জুড়ে 48টি জনপ্রিয় Google Fonts-এর একটি বাছাই করা সেট — যার মধ্যে রয়েছে Playfair Display, Merriweather, Inter, Roboto, Poppins, Montserrat, Oswald, Space Grotesk, JetBrains Mono ও আরও অনেক।