Ads

header ads

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

গুগোল ফন্ট কি সেটা নতুন করে বলার কিছু নেই। যারা ওয়েব ডিজাইন নিয়ে একটু ঘাটাঘাটি করেন তারা সকলেই এই বিষয়ে অবগত। ওয়েব পেজে স্টাইলিশ হোক আর নরমাল সব ধরনের ফন্ট ব্যবহারের ক্ষেত্রে গুগোল ফন্ট এর বিকল্প নেই। গুগোল ফোন ব্যবহার করে আমরা কোথাও কোন ফোন ফাইল আপলোড না করেই যে কোন ফন্ট ফ্রিতেই ওয়েবসাইটে ব্যবহার করতে পারি। গুগোল ফন্ট ব্যবহারের অনেক সুবিধা আছে এর মধ্যে অন্যতম হলো এতে আলাদা ভাবে কোন ফন্ট আপলোড করা লাগে না এবং গুগলের হাইস্পিড সার্ভারের কারনে ওয়েবসাইটে ফন্ট দ্রুত লোড হয়। কোন সাধারণ ওয়েব পেজে গুগোল ফন্টের সিডিএন লিংক করে আমরা সহজেই গুগোল ফন্ট ইন্সটল করতে পারি কিন্তু ব্লগার সাইটের ক্ষেত্রে তার ব্যতিক্রম। গুগোল ফন্ট এর সিডিএন লিংক এর মধ্যে সেমিকোলন(;) থাকার কারণে গুগোল ফন্ট লিঙ্ক করতে গেলে ব্লগার টেমপ্লেট সেভ হয় না। ফলে আমরা দ্বিধায় পড়ে যাই এবং আমাদের মনে প্রশ্ন জাগে আসলেই কি ব্লগার সাইটে গুগোল ফন্ট ইন্সটল করা সম্ভব? এই প্রশ্নের উত্তর হলো হ্যাঁ, অবশ্যই ব্লগার সাইটে গুগোল ফন্ট ইন্সটল করা সম্ভব। তবে ব্লগ সাইটে গুগোল ফন্ট ইনস্টলার ক্ষেত্রে নর্মাল ওয়েবপেজের থেকে কিছু ব্যতিক্রম ভাবে ইন্সটল করতে হয়।



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

কিভাবে গুগোল ফন্ট ইনস্টল করবেন সেটা দেখানোর জন্য আমি হিন্দ শিলিগুড়ি বাংলা ফন্ট ইনস্টল করে দেখাবো।

ফন্ট ইন্সটল এর জন্য প্রথমেই গুগল সার্চ করেই হোক আর সরাসরি ওয়েবসাইটে প্রবেশ করেই হোক আপনার কাঙ্খিত ফন্ট ফ্যামিলি গুগোল ফন্টে খুঁজে বের করুন। খুঁজে বের করার পর আপনার প্রয়োজন অনুযায়ী স্টাইল সিলেক্ট করে ডান সাইটবারে দেখুন সেখানে দুই জায়গায় কিছু করে কোড দেওয়া আছে(মোবাইল এর ক্ষেত্রে চার গ্রিডের আইকন এ ক্লিক করে কোডের মেনু ওপেন করতে হবে)। উপরের কোডটুকু ফন্ট ফ্যামিলি ইনস্টল করার জন্য এবং নিচের কোডটুকু ফন্ট সাইটে অ্যাপ্লাই করার জন্য। ডিফল্ট ভাবে উপরের যে কোড মানে ফন্ট ইনস্টল করার জন্য যে কোড সেখানে ফন্ট লিঙ্ক করার কোড দেওয়া থাকে, আমরা যেহেতু ফন্ট লিঙ্ক না করে ইমপোর্ট করবো তাই @import অপশনের পাশে থাকা রেডিও বাটনে ক্লিক করুন তাহলে ফন্ট ইমপোর্ট করার জন্য প্রয়োজনীয় কোড দেখাবে। এবার ফন্ট ইমপোর্ট করার জন্য যেসব কোড আছে সেগুলো থেকে <style> ট্যাগ বাদে কোডগুলো কপি করে নিন। কোড কপি করার পর আপনার ব্লগার টেমপ্লেট এর এডিট মোডে গিয়ে আপনার কপি করা কোড টেমপ্লেট এর <b:skin> ট্যাগ এর মধ্যে সকল সিএসএস এর উপরে পেস্ট করে দিন। ফন্ট ইনস্টল এর জন্য এটুকু কোড পেস্ট করে সেভ করলেই হবে। এবার পালা ফন্ট সাইটে ব্যবহার করার।
(নিচের কোডগুলো মধ্যে প্রথম কোডগুলো অরজিনাল কোড যেগুলো গুগল ফন্ট এর সাইটে ছিল, আর দ্বিতীয় কোডটি যেটা আমি কপি করেছি)

<style>

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap');

</style>

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap');


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

তো বন্ধুরা এই ছিলো আজকের পোস্ট, আশা করছি কখনো আপনাদের কাজে আসবে। পোস্টটি ভালো লাগলে কমেন্ট সেকশনে জানাবেন। আর টিপস এবং ট্রিকস সম্পর্কিত পোস্ট পেতে এই সাইট রেগুলার ভিজিট করুন।

Post a Comment

0 Comments