কীভাবে ফন্ট প্লাগইন ব্যবহার করবেন তা নিয়ে বিস্তারিত

ব্লগের সৌন্দর্য বাড়াতে আমরা অনেকেই কাস্টম ফন্ট (Custom Font) ব্যবহার করি। কিন্তু সমস্যা হলো, সাধারণ CSS বা Link ট্যাগের মাধ্যমে ফন্ট যুক্ত করলে ওয়েবসাইটের লোডিং স্পিড অনেক কমে যায় এবং গুগল পেজস্পিডে "Render Blocking Resource" এরর দেখায়।

এর সমাধান হিসেবে Probha টেমপ্লেটে রয়েছে অ্যাডভান্সড Font Plugin। এটি সাধারণ CSS এর বদলে আধুনিক JavaScript ব্যবহার করে ফন্ট লোড করে। এর সবচেয়ে বড় সুবিধা হলো, এটি ব্যাকগ্রাউন্ডে ফন্ট লোড করে, তাই আপনার ওয়েবসাইটের লোডিং স্পিড বিন্দুমাত্র কমে না।

প্লাগিনটি কোথায় পাবেন?

এটি সেটআপ করতে লেআউট অপশনে যান।

• ব্লগার ড্যাশবোর্ড থেকে Layout অপশনে যান।
• Plugins সেকশন থেকে "Font" গ্যাজেটটি খুঁজে বের করুন।

কনফিগারেশন গাইড

এই প্লাগিনটি নিয়ন্ত্রণ করার জন্য আমরা JSON ফরম্যাট ব্যবহার করেছি। এখানে আপনি যত খুশি তত কাস্টম ফন্ট যুক্ত করতে পারবেন। গ্যাজেটটি এডিট করলে কনটেন্ট বক্সে নিচের কোডটি দেখতে পাবেন:

{
  "status": true,
  "fonts": [   
    {
      "fontUrl": "https://probha.pages.dev/fonts/static/google-sans-flex.woff2",
      "fontFamily": "Google Sans Flex"
    }
  ]
}

স্ট্যাটাস

• "status": true — ফন্ট লোডার চালু রাখতে true রাখুন।
• "status": false — ফন্ট লোডার বন্ধ রাখতে false ব্যবহার করুন।

ফন্ট তালিকা

এখানে আপনি আপনার ফন্টগুলোর লিংক এবং নাম দিয়ে যুক্ত করবেন।

• "fontUrl": এখানে ফন্টের সরাসরি ডাউনলোড লিংক বা ডাইরেক্ট লিংক দিতে হবে। (পরামর্শ: দ্রুত গতির জন্য .woff2 ফরম্যাট ব্যবহার করা উত্তম)।
• "fontFamily": ফন্টটির একটি নাম দিন। পরবর্তীতে CSS এ বা থিম ডিজাইনারে এই নাম দিয়েই ফন্টটি ব্যবহার করতে হবে।

একাধিক ফন্ট কীভাবে যুক্ত করবেন?

আপনি যদি একাধিক ফন্ট ব্যবহার করতে চান, তবে নিচের উদাহরণের মতো করে কমা (,) ব্যবহার করে নতুন অবজেক্ট যুক্ত করতে পারেন:

{
  "status": true,
  "fonts": [   
    {
      "fontUrl": "https://example.com/fonts/font-1.woff2",
      "fontFamily": "My Font One"
    },
    {
      "fontUrl": "https://example.com/fonts/font-2.woff2",
      "fontFamily": "My Font Two"
    }
  ]
}

সুবিধাগুলো একনজরে

• সুপার ফাস্ট স্পিড: পেজ লোড আটকায় না (Non-blocking loading)।
• PageSpeed স্কোর: গুগলের পেজস্পিড স্কোরে কোনো নেতিবাচক প্রভাব ফেলে না।
• সহজ ব্যবস্থাপনা: কোডিং ফাইলে হাত না দিয়েই লেআউট থেকে ফন্ট পরিবর্তন করা যায়।

উপসংহার

একটি সুন্দর ফন্ট আপনার ব্লগের চেহারা বদলে দিতে পারে, কিন্তু তা যেন সাইটের গতির বিনিময়ে না হয়। Probha টেমপ্লেটের এই স্মার্ট ফন্ট লোডার ব্যবহার করে আপনি স্পিড ঠিক রেখেই আকর্ষণীয় সব ফন্ট ব্যবহার করতে পারবেন। পোস্টটি ভালো লাগলে শেয়ার করতে ভুলবেন না।