বাঙলা ওয়েবফন্ট: ইডিয়ট-ফ্রী ওয়েবসাইট
কয়েকদিন খেটেখুঁটে দারুণ একটা ওয়েবসাইট বানালেন। রেসপনসিভ ডিজাইন আরো কতশত কারিশমা। চমৎকার সব কন্টেন্ট, তারমধ্যে বাঙলাই বেশি। তারপর কোনো বন্ধুর ফোন বা ট্যাব থেকে, অন্য কম্পিউটারের ব্রাউজার দিয়ে ঢুকে দেখলেন বাঙলা দেখাচ্ছে বিশ্রীভাবে। :disappointed: সেটিংসে ঢুকে বাঙলা ফন্ট ঠিক করে দিয়ে দেখলেন ভালো দেখাচ্ছে।
কিন্তু এভাবে তো জনে জনে ব্রাউজার সেটিংসে ঢুকে ফন্ট ঠিক করে দেওয়া সম্ভব না, তাই কি? :sweat: এখানেই চলে আসে google webfont কথা। এই ফন্টগুলো আপনি CSS stylesheet হিসেবে সাইটে যুক্ত করতে পারবেন। এতে হবে কী, সাইট লোড হওয়ার সময় ফন্টটিও লোড হবে। ওয়েবফন্টগুলোর মধ্যে তিনটি আছে বাঙলা। এগুলো হচ্ছে: Lohit Bengali, Noto Sans Bengali এবং Noto Sans Bengali UI। এরমধ্যে লোহিত খুবই কুৎসিত একটি ফন্ট। :expressionless: নোটো সুন্দর, সুপাঠ্য। Noto Sans Bengali UI একই ফন্ট তবে বোল্ড এবং হিন্টিং সাপোর্টসহ। আমরা Noto Sans Bengali UI ব্যবহার করবো।
এরজন্য আমাদের দুটো কাজ করতে হবে। প্রথমে আমরা সাইটের <head> tag এর ভিতরে স্টাইলশীট যোগ করবো:
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansbengaliui.css">
এবার সিএসএস ফাইলে আমরা font-family এর ভিতরে ফন্টটি এনাবেল করবো। পুরো ওয়েবসাইটে বাঙলা ঠিকমত দেখাতে এটি html এর এট্রিবিউট হিসেবে দেওয়া সুবিধাজনক:
html {
font-family: 'Noto Sans Bengali UI', sans-serif;
}
লক্ষ্য রাখতে হবে font-family এট্রিবিউটের প্রথমেই যেন 'Noto Sans Bengali UI' থাকে। তা নাহলে কিছু মনোস্পেস ফন্টের কারনে ফন্ট স্পেসিঙ বেড়ে যেতে পারে।
সবকিছু ঠিকঠাক করলে আপনার ওয়েবসাইটে পাবেন চমৎকার বাঙলা রেন্ডারিঙ। :v: