আপনার ওয়েবসাইটের সাফল্য বড় মাত্রায় এর চেহারার ওপর নির্ভর করে। সঠিক রঙের কম্বিনেশন এবং থিম আপনার ভিজিটরদের আপনার সাইটে কিছুটা বেশি সময় রাখবে। আপনার সাইটের রঙের প্যালেট এবং স্ট্রাকচারের পাশাপাশি, আপনি যে ফন্ট বেছে নেন সেটিও আপনার অডিয়েন্সকে জড়িত রাখতে অত্যন্ত গুরুত্বপূর্ণ ভূমিকা পালন করে।
হয়তো আপনি ব্রাউজিং করার সময় একটি আকর্ষণীয় সাইটের saamne আসেন, এবং আপনি জানতে চান সেটি কোন ফন্ট ব্যবহার করছে। অনলাইন এক্সটেনশন এবং আপনার ব্রাউজারের বিল্ট-ইন Inspect Element টুল ব্যবহার করে, একটি ফন্ট চেনা দ্রুত এবং সহজ।
Inspect Element টুল ব্যবহার করে ফন্ট খুঁজে বের করার পদ্ধতি
যদি আপনি না জানেন, তবে আপনার ব্রাউজারের বিল্ট-ইন Inspect Element টুল আপনাকে একটি ওয়েবসাইটের সোর্স কোড পরীক্ষা করতে দেয়। আপনি এর CSS, HTML, এবং অন্যান্য তথ্য দেখে একটি সাইটের ডিজাইন এলিমেন্ট বুঝতে পারেন। আপনার নিজস্ব সাইট ডিজাইন করার সময় অনুপ্রেরণা পাওয়ার এটি একটি দুর্দান্ত পথ।
Inspect Element টুল ব্যবহার করে ফন্ট চেনার প্রক্রিয়া খুব সিম্পল, এবং আপনার কোনো কোডিং স্কিলের প্রয়োজন নেই। এই টুল মার্কেটে সকল ব্রাউজারে উপলব্ধ, এবং প্রতিটির লেআউট মিলता জুলতা।
আপনার ব্রাউজারের Inspect টুল ব্যবহার করে ফন্ট চেনার পদ্ধতি নিচে দেওয়া হলো।
- আপনি যে ওয়েবসাইটটি ব্যবহার করতে চান সেটি খুলুন।
- আপনি যে ফন্টটি চেনতে চান সেটি যেসব টেক্সটে আছে সেগুলো হাইলাইট করুন, এবং রাইট-ক্লিক করুন।
- কনটেক্সট মেনু থেকে Inspect-এ ক্লিক করুন।
- Inspect মেনু খুললে, Computed-এ ক্লিক করুন।
- নিচে স্ক্রল করুন Font-Family সেকশন খুঁজে বের করতে। এখানে, আপনি ফন্টের নাম এবং স্টাইল, সেইসাথে এর ডাইমেনশন পাবেন।
Inspect টুল ব্যবহার করার অন্যান্য পদ্ধতি
আপনি যদি Inspect টুল ব্যবহার করে সাইটের ফন্ট খুঁজে বের করার একটি দ্রুত পথ চান, তবে এই পদ্ধতি চেষ্টা করুন:
- আপনি যে ওয়েবসাইটটি ব্যবহার করতে চান সেটি খুলুন।
- Ctrl + Shift + C চাপুন (Cmd + Shift + C Mac-এ)।
- টেক্সটের ওপর হভার করুন ফন্ট স্টাইল, সাইজ, কালার কোড, এবং মার্জিন ডিসপ্লে করতে।
আপনি Inspect টুল ব্যবহার করে একটি ওয়েবপেজে ব্যবহৃত ফন্টের লিস্টও চেক করতে পারেন। এটি করার পদ্ধতি নিচে দেওয়া হলো:
- ওয়েবপেজে যান।
- Ctrl + Shift + I চাপে সোর্স কোড খুলুন (Cmd + Shift + I Mac-এ)।
- Network ট্যাবে ক্লিক করুন, এবং তারপর Font ট্যাব সিলেক্ট করুন।
- এখানে, আপনি ওয়েবপেজে ব্যবহৃত সকল ফন্টের লিস্ট দেখবেন।
রিয়েল-টাইমে সকল ফন্টের লিস্ট পেতে, আপনাকে ওয়েবপেজ রিফ্রেশ করতে হতে পারে।
ব্রাউজার এক্সটেনশন ব্যবহার করে ফন্ট চেনার পদ্ধতি
আপনি যদি একটি ফন্ট চেনার আরও সুবিধাজনক পথ চান, তবে আপনি একটি ফন্ট-ফাইন্ডিং ব্রাউজার এক্সটেনশন ইনস্টল করতে চাইতে পারেন। যদিও ওয়েবে ফন্ট ডিটেক্ট করতে সাহায্য করার অনেক ব্রাউজার এক্সটেনশন রয়েছে, তবে দুটি সবচেয়ে জনপ্রিয় হলো WhatFont এবং Font Finder।
চলুন, দুটি এক্সটেনশন ব্যবহার করে ফন্ট চেনার প্রক্রিয়া দেখি।
১. WhatFont
WhatFont একসাথে একাধিক ফন্ট দ্রুত ডিটেক্ট করার জন্য ব্যাপকভাবে জনপ্রিয়। এই টুল ব্যবহার করার পদ্ধতি নিচে দেওয়া হলো।
- আপনার ব্রাউজারে WhatFont ইনেবল থাকলে, টেক্সটের ওপর হভার করুন এর ফন্ট দেখতে।
- একবার টেক্সটে ক্লিক করলে, একটি পপ-আপ উইন্ডো আসবে বাকি ফন্ট ডিটেইলসসহ, যেমন ফন্ট সাইজ, কালার, এবং স্টাইল।
- এছাড়া, আপনি একসাথে টেক্সটের একাধিক সেকশন সিলেক্ট করতে পারেন একই পেজে ভিন্ন ভিন্ন ফন্ট কম্পেয়ার করতে।
২. Font Finder
Font Finderও আপনি যেকোনো ওয়েবসাইটের টেক্সটের ওপর হভার করলে ফন্ট ডিটেইলস দেখায়। যাইহোক, এটি অনেক টেকনিক্যাল ডিটেইলস দেয়, তাই আপনি যদি ওয়েব ডিজাইন জানেন না তবে এটি একটু বিভ্রান্তিকর হতে পারে।
즉, Font Finder ওয়েব ডেভেলপারদের জন্য আরও উপযুক্ত যারা বিদ্যমান ফন্টগুলো নতুন ফন্ট দিয়ে রিয়েল-টাইমে প্রতিস্থাপন করতে চান। এটি কোনো স্থায়ী পরিবর্তন করার আগে ফন্টগুলো টেস্ট আউট করা সহজ করে দেয়।
Font Finder ব্যবহার করে একটি ফন্ট টেস্ট করার পদ্ধতি নিচে দেওয়া হলো:
- ওয়েবপেজ থেকে টেক্সটের একটি অংশ হাইলাইট করুন।
- সেটির ওপর রাইট-ক্লিক করুন এবং কনটেক্সট মেনু থেকে Font Finder সিলেক্ট করুন।
- Replace font with (ফন্ট প্রতিস্থাপন করুন) সিলেক্ট করুন এবং ফন্টের নাম লিখুন। চলুন Calibri যোগ করি এবং দেখি কীভাবে প্রিভিউতে ফন্টটি পরিবর্তন হয়।
- আপনি যদি ফন্ট রিসেট করতে চান, পেজ রিফ্রেশ করুন।
চিত্রে থাকা ফন্ট চেক করার কথা কী?
আপনি যদি একটি চিত্রের ফন্ট চেনতে চান, তবে ব্রাউজার এক্সটেনশন এবং আপনার ব্রাউজারের Inspect টুল সাহায্য করতে পারে না। যাইহোক, আপনি অনলাইন ইমেজ ইন্সপেক্টর টুলস চেষ্টা করতে পারেন যেমন WhatFontIs, FontSquirrel, Fontspring, WhatTheFont, এবং আরও অনেক কিছু।
চিত্র থেকে ফন্ট চেনার প্রক্রিয়া প্রায় সকল টুলে একই। চলুন WhatTheFont ব্যবহার করে একটি চিত্রের ফন্ট চেনার চেষ্টা করি।
- আপনি যদি ইতিমধ্যে না করে থাকেন, তবে আপনি যে চিত্রটি ব্যবহার করতে চান সেটি ডাউনলোড করুন।
- চিত্রটি WhatTheFont-এ ইম্পোর্ট করুন।
- WhatTheFont স্বয়ংক্রিয়ভাবে আপনার চিত্রের টেক্সট ডিটেক্ট করবে। ক্রপ বক্স ছোট বা বড় করুন যাতে সেটি আপনি যে ফন্টটি চেনতে চান সেটিকে ঘেরে। শেষ হলে Arrow button (তীর বাটন) চাপুন।
- WhatTheFont তারপর চিত্রের ফন্টকে তার গ্যালেরির ফন্টগুলোর সাথে মিলিয়ে, আপনাকে কাছাকাছি ফন্টগুলো দেখাবে।
- আপনি যদি একবারে ভালো ম্যাচ না পান, তবে আপনি Show more results (আরও রেজাল্ট দেখান) ক্লিক করতে থাকেন আরও সম্পর্কিত ফন্ট দেখতে।
ওয়েব থেকে ফন্ট ডিটেক্ট করুন এবং আপনার ডিজাইনে ব্যবহার করুন
ফন্ট একটি ওয়েবসাইট বা গ্রাফিক ডিজাইনের সাফল্যে উল্লেখযোগ্য ভূমিকা পালন করে। আপনি যদি ব্রাউজিং করার সময় একটি আকর্ষণীয় ফন্টের saamne আসেন, তবে উপরের পদ্ধতিগুলো ব্যবহার করে সহজে সেটি ডিটেক্ট করতে পারেন।
