কিভাবে কাস্টম ফন্ট আপনার ওয়েবসাইটে ব্যবহার করবেন

কিভাবে কাস্টম ফন্ট আপনার ওয়েবসাইটে ব্যবহার করবেন

বর্তমানে ওয়েবসাইট ডিজাইনে ইউনিক লুক দেওয়ার জন্য কাস্টম ফন্ট খুব জনপ্রিয়। কিন্তু অনেক সময় আমাদের পছন্দের ফন্ট Google Fonts-এ পাওয়া যায় না। সেক্ষেত্রে ফন্ট ফাইল ডাউনলোড করে সরাসরি ওয়েবসাইটে ব্যবহার করা যায়।

চলুন ধাপে ধাপে দেখে নেই—

---

ধাপ ১: ফন্ট ফাইল সংগ্রহ করুন

প্রথমে আপনার পছন্দের ফন্ট ফাইল ডাউনলোড করুন। সাধারণত ফন্ট ফাইল .ttf, .otf, .woff, .woff2 ফরম্যাটে থাকে। ওয়েবসাইটের জন্য .woff বা .woff2 সবচেয়ে ভালো, কারণ এগুলো দ্রুত লোড হয়।

---

ধাপ ২: ফন্ট ফাইল ওয়েবসাইটে আপলোড করুন

আপনার প্রোজেক্ট ফোল্ডারের ভেতরে একটি fonts নামের ফোল্ডার তৈরি করুন এবং সেখানে ফন্ট ফাইলগুলো রাখুন। যেমন:

/fonts/myfont.woff2  
/fonts/myfont.woff

---

ধাপ ৩: CSS এ ফন্ট যুক্ত করুন

এখন CSS ফাইলে নিচের কোড যোগ করুন:

@font-face {
  font-family: "MyCustomFont";
  src: url("/fonts/myfont.woff2") format("woff2"),
       url("/fonts/myfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "MyCustomFont", sans-serif;
}

এখানে "MyCustomFont" হচ্ছে ফন্টের নাম।

---

ধাপ ৪: ওয়েবসাইটে ফন্ট ব্যবহার করুন

এখন যেকোনো ট্যাগে সহজেই কাস্টম ফন্ট ব্যবহার করা যাবে:

h1 {
  font-family: "MyCustomFont", Arial, sans-serif;
}

---

Blogger এ কাস্টম ফন্ট যুক্ত করার নিয়ম

যদি আপনি Blogger ব্যবহার করেন, তাহলে Dashboard → Theme → Edit HTML এ গিয়ে <style> এর ভেতরে একই কোড বসিয়ে দিতে হবে।
ফন্ট ফাইল আপনি Google Drive / Dropbox / Hosting server থেকে হোস্ট করে url() এর মধ্যে লিঙ্ক ব্যবহার করতে পারবেন।

---

কেন কাস্টম ফন্ট ব্যবহার করবেন?

✔ ওয়েবসাইটকে আলাদা ও ইউনিক দেখায়
✔ ব্র্যান্ড আইডেন্টিটি তৈরি হয়
✔ User Experience (UX) ভালো হয়
✔ Google Fonts এ না পাওয়া গেলেও পছন্দের ফন্ট ব্যবহার করা যায়

---

🔑 Final Words

Google Fonts এর বাইরেও কাস্টম ফন্ট ব্যবহার করা খুব সহজ। শুধু ফন্ট ফাইল যোগ করে CSS এ @font-face ব্যবহার করলেই আপনার ওয়েবসাইটে ফন্টটি কাজ করবে।