এডমিশন টিউন https://www.admissiontune.com/2021/08/custom-font-in-blogger.html

ব্লগারে বাংলা ফন্ট যুক্ত করার নিয়ম ২০২২

গুগল বর্তমানে বাংলা ব্লগে গুগল এডসেন্স দেওয়াতে দিন দিন বাংলা ওয়েবসাইটের চাহিদা বেড়ে যাচ্ছে। যেকোনো ওয়েবসাইটের প্রাণ হচ্ছে তার কনটেন্টসমূহ। ভালো আর এসইও ফ্রেন্ডলি কনটেন্টে লেখার মূল কারণ হলো সাইটে ভিজিটর বাড়ানো। কিন্তু ভালোমানের কনটেন্ট লেখার পরেও আপনি সাইটে ট্রাফিক হারাতে পারেন যদি বাংলা ফন্টের লেখা খুব ঝকঝকে এবং পরিষ্কার না হয়। ব্লগার থিমে ডিফল্ট হিসেবে গুগল ফন্ট ব্যবহার করা  হয়। এই ফন্ট ব্যবহার করে লিখলে বাংলা লেখা দেখতে ভালো লাগে না। বাংলা একটি প্রবাদ আছে, "আগে দর্শনধারী পরে গুণবিচারী"। ফলে বুঝতেই পারছেন ভালো কনটেন্টের পাশাপাশি আপনার ফন্ট স্টাইল কতটা গুরুত্বপূর্ণ। ব্লগারে বাংলা ফন্ট কিভাবে যুক্ত করবেন তা নিয়ে বিস্তারিত বলা হবে। 
কিভাবে ব্লগারে বাংলা ফন্ট যুক্ত করবেন

ব্লগারে বাংলা ফন্টযুক্ত করার নিয়ম

প্রথমেই আমরা ব্লগারে বাংলা ফন্ট যুক্ত করার উপায় দেখে নিবো। ব্লগে যেসব বাংলা ফন্ট ব্যবহার করা হয় সেগুলো গুগল ফন্টে পাবেন না। তাছাড়া বাংলা কাস্টম ফন্ট ব্যবহার করার জন্য হোস্টিং স্টোরেজের প্রয়োজন হয়। সঠিক উপায়ে কাস্টম বাংলা ফন্ট যুক্ত না করলে আর্টিকেলের লেখা অস্পষ্ট দেখাবে। আমরা ব্লগারে কাস্টম বাংলা ফন্ট যুক্ত করার জন্য Maateen এর ফন্ট হোস্টিং ব্যবহার করবো। এটি সম্পূর্ণ বিনামূল্যে ব্যবহার করতে পারবেন। 
প্রথমেই আপনাকে এই ওয়েবসাইটে যেতে হবে। এর পর নিচের ছবির মত ফন্টের তালিকা দেখতে পাবেন। খেয়াল করুন ছবিতে ফন্টের নিচে "আমার সোনার বাংলা, আমি তোমায় ভালোবাসি" লেখা। অর্থাৎ উক্ত বাংলা ফন্ট আপনার ব্লগে যুক্ত করলে ঠিক তেমন স্টাইলের লেখা দেখা যাবে। 
কিভাবে ব্লগারে বাংলা ফন্ট যুক্ত করবেন
এখন আপনি যে বাংলা ফন্টটি ব্লগে যুক্ত করতে চান সেটির উপর ক্লিক করুন। এবার আপনি "Embed Font" ফন্ট লেখার নিচে "STANDARD" দেখতে পাবেন। এখান থেকে উক্ত custom font এর সিএসএস স্টাইল শিটটি কপি করুন। যেমনঃ 
<link href="https://fonts.maateen.me/kalpurush/font.css" rel="stylesheet"/>
এখানে খেয়াল করুন আমরা "stylesheet" লেখাটির পরে একটি (/) স্লাশ দিয়েছি যা সেখানে দেওয়া নেই। এটি এড না করলে ফন্ট থিমের মধ্যে যুক্ত করা যাবে না। এবার কপি করা সিএসএস স্টাইল শিটটি আপনার থিমের <head> ট্যাগের নিচে বসিয়ে দিন অথবা </head> ট্যাগের উপরে বসিয়ে দিন। তারপর সেইভ থিমে ক্লিক করে থিমটি সেইভ করে নিন।
এখন বডিতে font-family হিসেবে আপনার উক্ত ফন্টের নাম যুক্ত করবেন। যেমনঃ কালপুরুষ ফন্টের জন্য font-family: 'Kalpurush', sans-serif; এভাবে যুক্ত করতে হবে। তবে এই কাজটি সাবধানতার সাথে করতে হবে কারণ থিমে font-awesome নামে একটি ফন্ট ফ্যামিলি থাকে যা kalpurush ফন্টের সাথে রিপ্লেস হয়ে গেলে আপনার থিমে কোন আইকন শো করবে না। 
কিভাবে ব্লগারে বাংলা ফন্ট যুক্ত করবেন
কাজটি সহজে করার জন্য প্রথমে আপনি থিমের লেখাগুলোকে মাইক্রোসফট ওয়ার্ডে পেস্ট করুন। এবার Ctrl+h চাপ দিন আপনার সামনে একটি ডায়ালগ বক্স আসবে। Find what এ আপনার থিমে আগে যে ফন্টটি যুক্ত ছিল সেটির নাম লিখুন এবং Replace with এ আপনার কাস্টম বাংলা ফন্টের নাম লিখুন। ব্যস এক ক্লিকেই আপনার থিমে থাকা ফন্টটি সরে গিয়ে কাস্টম বাংলা ফন্ট এড হয়ে যাবে। 
এই পর্যন্ত পড়ে আপনি কাজটি করবেন কিন্তু তারপরেও লেখা পরিষ্কার ও ঝকঝকে দেখাবে না! কারণ ফন্টটি আপনি বডিতে যুক্ত করলেও এটার সিএসএস ইম্পোর্ট করার কাজ বাকি। উক্ত কাস্টম ফন্টের সিএসএস ইম্পোর্ট করার জন্য আপনাকে "Or, IMPORT in CSS" লেখাটির নিচে থেকে ফন্টের সিএসএস কপি করতে হবে। যেমনঃ কালপুরুষ ফন্টের জন্য এটি এমন দেখাবে,
<style>
@import url('https://fonts.maateen.me/kalpurush/font.css');
</style>
এটিকে আপনার থিমে যুক্ত করতে হবে কারণ এটা ছাড়া লেখা মোবাইলে পরিষ্কার দেখালেও পিসি বা ল্যাপটপে দেখাবে না। এরজন্য আপনাকে পূর্বের ন্যায় থিমের ভিতর গিয়ে Ctrl+F চেপে <body লিখে সার্চ করতে হবে। এটি লিখে সার্চ করলে আপনি <body expr:class='data:blog.pageType'> এই কোডটি দেখতে পাবেন। এটার ঠিক নিচে আপনাকে উক্ত ফন্টের সিএসএস কোডটি বসাতে হবে এবং সেইভ থিমে ক্লিক করবেন। কাজটি সঠিকভাবে করে থাকলে আপনার ব্লগে ঝকঝকে ও পরিষ্কারভাবে বাংলা ফন্ট শো করবে। 
উপরে আমরা থার্ড পার্টির সাহায্যে ব্লগে বাংলা ফন্ট যুক্ত করার প্রক্রিয়া দেখিয়েছি। থার্ড পার্টির ফন্ট যুক্ত করার ক্ষেত্রে ভিজিটর সাইটে প্রবেশের পরপর ফন্ট ব্লগে লোড নিতে কিছুটা সময় নেয়। আপনি যদি গুগল ফন্টের কোন কাস্টম ফন্ট ব্যবহার করেন তবে ওয়েবসাইটে ফন্ট লোড নিতে কোন সময় ব্যয় হবে না। গুগলের নিজস্ব সার্ভার হওয়ার কারণে খুব দ্রুত ফন্ট লোড নিয়ে থাকে। তবে ব্লগে ব্যবহৃত ফন্টগুলো গুগল ফন্টে পাবেন না। গুগল ফন্টে অল্প কিছু বাংলা ফন্টসহ মোট টি ফন্ট রয়েছে। আপনি চাইলে এগুলোর কোনটি যুক্ত করতে পারবেন। ব্লগে কিভাবে গুগলের custom web font যুক্ত করবেন এবার সেটি দেখা যাক

গুগল custom web font যুক্ত করার নিয়ম

 
১। প্রথমে এই লিংকে প্রবেশ করবেন। এরপর আপনি Language লেখাতে ক্লিক করে Bengali সিলেক্ট করুন। তাহলে গুগল custom web font থেকে বাংলা কোন কোন ফন্ট আছে তা দেখতে পাবেন।
কিভাবে ব্লগারে বাংলা ফন্ট যুক্ত করবেন
২। উদাহরণস্বরূপ আমরা Mina ফন্টটি নিচ্ছি। এটার ঠিক ডান দিকে "2 styles" লেখা দেখতে পারছেন। এটির উপর ক্লিক করুন। আপনি যে ফন্ট সিলেক্ট করবেন সেটাতে 2 এর বদলে অন্যকোন সংখ্যাও থাকতে পারে।
কিভাবে ব্লগারে বাংলা ফন্ট যুক্ত করবেন
৩। এবার আপনার সামনে দুইটি স্টাইল আসবে আপনি প্রথমটির ডানে থাকা "Select this style" এ ক্লিক করবেন। এখন ব্রাউজারের উপরে "Download Family" লেখার পাশে একটি আইকন দেখতে পাবেন এটিতে ক্লিক করবেন। ক্লিক করার পর নিচের ছবির মত ইন্টারফেস দেখতে পাবেন।
কিভাবে ব্লগারে বাংলা ফন্ট যুক্ত করবেন
এখান থেকে ফন্টের সিএসএস স্টাইল শিটটি কপি করুন। আপনি তিনটি লাইন দেখতে পাচ্ছেন। আপনাকে তৃতীয় লাইন বা rel="stylesheet" যুক্ত লাইনটি কপি করতে হবে। যেমনঃ
<link href="https://fonts.googleapis.com/css2?family=Mina&display=swap" rel="stylesheet"/>
কপি করা সিএসএস স্টাইল শিট আপনার থিমের <head> ট্যাগের নিচে বা </head> ট্যাগের উপরে পেস্ট করুন। খেয়াল করুন এখানে আমরা "stylesheet" লেখাটির পরে একটি (/) স্লাশ দিয়েছি যা সেখানে দেওয়া নেই। এটি এড না করলে ফন্ট থিমের মধ্যে যুক্ত করা যাবে না।  এবার  তারপর @import থেকে ফন্টের সিএসএসটি কপি করুন। যেমনঃ
<style>
@import url('https://fonts.googleapis.com/css2?family=Mina&display=swap');
</style>
তারপর আপনাকে Ctrl+F চেপে <body লিখে সার্চ করতে হবে। <body লিখে সার্চ করলে আপনি <body expr:class='data:blog.pageType'> এই কোডটি দেখতে পাবেন। এটার ঠিক নিচে আপনাকে ফন্টের সিএসএস কোডটি বসাতে হবে এবং সেইভ থিমে ক্লিক করবেন। কাজটি সঠিকভাবে করে থাকলে আপনার ব্লগে ঝকঝকে ও পরিষ্কারভাবে গুগলের custom web font শো করবে। 

পর্যালোচনাঃ আপনার মনে প্রশ্ন আসতে পারে নিজস্ব হোস্টিং সার্ভার না থাকলেও গুগল ড্রাইভের ফ্রি হোস্টিং ব্যবহার করে কি কাস্টম ফন্ট ইউজ করা যায়? হ্যাঁ এভাবেও পারবেন কিন্তু সমস্যা হলো গুগল ড্রাইভকে custom web font এর হোস্টিং সার্ভার হিসেবে ব্যবহার করলে আপনার ফন্ট লোড নিতে অনেক সময় নিবে। এতে করে আপনি ভিজিটর হারাবেন। ফলে আমাদের দেখানো দুইটি পদ্ধতি ব্যবহার করাই ভালো ম্যাথড। আপনার ব্লগে কাস্টম ফন্ট যুক্ত করতে কোন সমস্যা হলে কমেন্ট করে জানাবেন।
সবার সাথে শেয়ার করুন
এই পোস্টে 2 জন কমেন্ট করেছেন
  1. লেখা তো ঠিক হয় না

    উত্তরমুছুন
    উত্তরগুলি
    1. আপনি ঠিক কোথায় সমস্যা মনে করছেন আমাদেরকে বিস্তারিত জানান দয়া করে।

      মুছুন

এডমিশন টিউন কী?