যখন কথা আসে বাংলা ওয়েব ফন্টের ব্যাপারে তখন সরবপ্রথম যেই ফন্টের নাম আসে টা হল Noto Serif Bengali। এই ফন্ট গুগল দ্বারা নির্মিত সবথেকে বেশি ব্যাবহার হওয়া একটি ফন্ট। ওয়েব ফন্ট হিসাবে Noto Serif Bengali সুন্দর একটি ফন্ট যা ইউনিকোড প্রকারে পাওয়া যায় এবং সহজ ভাবে প্রয়োগ করা যায়। এই ফন্টের স্টাইল ট্র্যাডিশনাল বাংলা লেখার সাথে মেল খাওয়ার জন্য খ্যাত।
এখানে আপনারা Noto Serif Bengali ফন্ট ডাউনলোড করতে পারেন তাও বিনামুল্যে। এটি একটি ওপেন ফন্ট সেই কারণে আপনারা সহজেই আপনাদের কাজে ব্যাবহার করতে পারবেন। এখানে এই ফন্ট কিভাবে ইন্সটল করতে হয়, কিভাবে ওয়েবসাইটে যুক্ত করতে হয় এবং অন্যান্য জরুরি বিষয় সম্পর্কেউ জানতে পারবেন।
NotoSerifBengali.ttf Font Information
| ফন্টের নামঃ | Noto Serif Bengali |
| ফন্টের ফ্যামিলিঃ | রেগুলার |
| ফন্টের প্রকারঃ | ইউনিকোড |
| ফন্টের ভার্সনঃ | ওয়েব |
| ফন্টের ফর্মেটঃ | TTF |
| কপিরাইটঃ |
নীচে ডাউনলোড বটনে ক্লিক করে এই ফন্টটি ডাউনলোড করতে পারেন এবং ব্যাবহার করতে পারেন। ফন্ট ব্যাবহার করার পূর্বে সঠিক ভাবে ফন্টিকে ইন্সটল করতে হবে। ইন্সটল করার পদ্ধতি নীচে দেওয়া আছে।
কিভাবে NotoSerifBengali ফন্ট ইন্সটল করবেন?
১. Windows কম্পিউটারের জন্য
প্রথমে ডাউনলোড করা ZIP ফর্মেটে ফন্ট UNZIP করতে হবে। এর জন্য ZIP ফাইলের উপরে Right Click করে Extract to File_Name -এ ক্লিক করবেন (File_Name যেই ফন্ট ডাউনলোড করবেন)।
এরপর সমস্ত ফন্টগুলিকে একসাথে সিলেক্ট করে Right Click করুন এবং Install for all users -এ ক্লিক করুন।
এই ভাবে Windows কম্পিউটারে ফন্ট ইন্সটল করতে পারবেন।
ওয়েবসাইটে NotoSerifBengali ফন্ট ব্যাবহার করবেন কিভাবে?
এই ওয়েবফন্ট প্রায় সমস্ত ব্রাউজারে কাজ করে কিন্তু সমস্ত একই ভাবে করে না। বর্তমানে চারটি ভিন্ন ফন্ট ফরম্যাট রয়েছে যা আলাদা আলাদা ব্রাউজারকে টার্গেট করার জন্য সঠিক ভাবে ইন্ট্রিগেট করতে হবে। ব্রাউজারে যেই সমস্ত ফন্ট ফরমেট কাজ করে এর মধ্যে রয়েছে TTF, WOFF, EOT এবং SVG। এর মধ্যে যে কোন ফরমেটের ফন্ট ব্যাবহার করতে পারবেন। আসুন পদ্ধতি জানুন…
১. আপনার ওয়েবফন্ট আপলোড করুন
সবার প্রথমে আপনাকে আপনার ওয়েবফন্ট (ফরমেট TTF, WOFF, EOT এবং SVG) সার্ভারে আপলোড করতে হবে। আপনি [fonts] নামে একটি ফোল্ডার সার্ভারের মধ্যে বানিয়ে সেখানে নিজের ফন্ট/ফন্টগুলি আপলোড করতে পারেন। এই ফোল্ডার থেকেই ফন্ট টার্গেট/কল করা হবে।
২. ওয়েবফন্ট স্টাইলশীটে যুক্ত করুন
আপনার স্টাইলশীট অর্থাৎ CSS ফাইলে এই ফন্ট যুক্ত করতে হবে। এখানে CSS @font-face এর দ্বারা ব্যাবহার করা হলে সমস্ত রকম ব্রাউসারে ফন্ট ব্যাবহার করা সম্ভব। নীচে CSS কোডের উদাহরণ দেখুন-
@font-face {
font-family: 'NotoSerifBengali';
src: url('NotoSerifBengali.eot');
src: url('NotoSerifBengali.eot?#iefix') format('embedded-opentype'),
url('NotoSerifBengali.woff2') format('woff2'),
url('NotoSerifBengali.woff') format('woff'),
url('NotoSerifBengali.ttf') format('truetype'),
url('NotoSerifBengali.svg#NotoSerifBengali') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}উপরে আপনি CSS-এ ফন্টগুলি যুক্ত করেছেন এবার আপনাকে আপনার HTML-এর ফাইলের সাথে স্টাইলশীটের সাথে লিঙ্ক করতে হবে। উদাহরণ দেখুন-
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
আপনি আপনার দরকার অনুসারে CSS ফাইলে বিভিন্ন tag-এ ওয়েবফন্ট যুক্ত করতে পারবেন। উদাহরণ দেখুন-
body { font-family: 'NotoSerifBengali', Arial, sans-serif; }p { font-family: 'NotoSerifBengali', Arial, sans-serif; }এই ভাবে আলাদা আলাদা Tag-এ ব্যাবহার করতে পারেন। আপনার দরকার অনুসারে ব্যাবহার করতে পারেন, এটা কেবল উদাহরণের জন্য।
৩. WebFont কিভাবে তৈরি করবেন?
এতক্ষণে বুঝতে পেরেছেন কিভাবে ওয়েবফন্ট ব্যাবহার করতে হয়ে। কিন্তু প্রশ্ন হল এই ফরমেটগুলির (TTF, WOFF, EOT এবং SVG) ফন্ট বানাবেন কিভাবে বা কোথায় পাবেন? আসুন জেনে নিন…
পদ্ধতিঃ সবার প্রথমে এই পেজে দেওয়া ফন্টটি ডাউনলোড করে নিন এবং @font-face generator এই ওয়েবসাইট খুলে নিন। এখানে ডাউনলোড করা ফন্টটি আপলোড করে দিন। নীচে TTF, WOFF, EOT এবং SVG ফরমেটগুলি সিলেক্ট করে নিন এবং Convert বটনে ক্লিক করুন।
এইভাবেই যে কোন ফন্টকে ওয়েবফন্টে পরিবর্তন করতে পারবেন যার ব্যাবহার উপরের দেওয়া পদ্ধতির দ্বারা করতে পারবেন।
কিভাবে ওয়ার্ডপ্রেসে ফন্ট যোগ করবেন?
ওয়ার্ডপ্রেসে NotoSerifBengali ফন্ট ব্যাবহার করা সহজ এর জন্য আপনাকে সামান্য কিছু পদ্ধতি অবলম্বন করতে হবে।
১. প্রথম ধাপঃ ওয়ার্ডপ্রেস ওয়েবসাইটে ফন্ট আপলোড করুন। এর জন্য আপনি আপনার সার্ভারের মধ্যে fonts নামে একটি ডাইরেক্টরি বানিয়ে নিন, যদি এটা ওয়ার্ডপ্রেস সাইটের মধ্যে হয় তাহলে ভালো হয়। উদাহরণ দেখুন-
yourwebsite.com/wp-content/uploads/fonts/২. দ্বিতীয় ধাপঃ ওয়ার্ডপ্রেস ড্যাশবোর্ড-এ Appearance -> Customize -> Additional CSS এর মধ্যে এই কোড ব্যাবহার করুন-
@font-face {
font-family: NotoSerifBengali;
src: url(https://www.banglabhumi.in/wp-content/uploads/fonts/NotoSerifBengali.ttf);
font-weight: normal;
}৩. তৃতীয় ধাপঃ এরপর আপনি আপনার দরকার অনুসারে বিভিন্ন জায়গায় ফন্টটি ব্যাবহার করতে পারবেন। ব্যাবহার করার জন্য উদাহরণ দেখুন-
body {
font-family: "NotoSerifBengali", Arial, sans-serif;
}.site-title {
font-family: "NotoSerifBengali", Arial, sans-serif;
}p {
font-family: "NotoSerifBengali", Arial, sans-serif;
}আশা করি আপনারা NotoSerifBengali ফন্ট ডাউনলোড এবং ব্যাবহার সম্পর্কে ভালোভাবে বুঝতে পেরেছেন। যদি কোন সমস্যা হয় বা আরও কিছু জানার থাকে অবশ্যই কমেন্ট করবেন আমরা সাহায্য করার চেষ্টা করব।