ওয়ার্ডপ্রেসের নতুন একটি টিউটোরিয়াল পর্বে আপনাদের সবাইকে স্বাগতম। আজ আমি আপনাদের সাথে আলোচনা করবো কিভাবে আপনারা কোন প্রকার প্লাগইন ছাড়াই আপনার ওয়ার্ডপ্রেস সাইটে গুগল ফন্ট ব্যবহার করবেন।
আপনি যদি জেনারেট প্রেস এর মত প্রোফেশনাল থিম ব্যবহার করে থাকেন এবং আপনার সাইটটি যদি বাংলতে হয়। তাহলে সেখানে দেখবেন বাংলা এর জন্য কোন প্রকার গুগল ফন্ট এর সুবিধা নেই।
তবে চিন্তার কোন কারন নেই। আপনি খুব সহজেই কোন প্রকার প্লাগইন ছাড়াই জেনারেট প্রেস বা যে কোন ওয়ার্ডপ্রেস থিমে নিজের পছন্দের গুগল ফন্ট ব্যবহর করতে পারবেন।
গুগল ফন্ট এর জন্য কেন প্লাগইন ব্যবহার করবো না?
আমরা গুগোল ফন্ট ব্যবহার করার জন্য চাইলে প্লাগইন বা ফন্ট লোকাল ভাবে আপলোড করতে পারি। কিন্তু সেভাবে করতে গেলে অনেক ক্ষেত্রে সাইট এর স্পীড স্লো হয়ে যেতে পারে।
যা র্যাংকিং এর ক্ষেত্রে বিপদের কারন হয়ে দাড়াতে পারে। তাই গুগল ফন্ট ব্যবহার এর জন্য এইচটিএমএল কোড এবং Additional CSS ব্যবহার করাই বেশি শ্রেয় বলে আমি মনে করি।
| আরো পড়ুন – ওয়ার্ডপ্রেস কি? কিভাবে শিখবেন ও ওয়ার্ডপ্রেস থেকে কি কি উপায়ে আয় করা যায়? ব্লগিং কি? কি কি উপায়ে ব্লগিং থেকে উপার্জন করা যায়? |
কার্যপ্রনালী
কিভাবে কোন প্রকার প্লাগইন ছাড়া ওয়ার্ডপ্রেস সাইটে গুগল ফন্ট ব্যবহার করবেন, তার সম্পূর্ন কার্যপ্রনালী নিম্নে আলোচনা করা হলো –
কার্যপ্রনালী ১
প্রথমত আমারা যে গুগল ফন্টটি ব্যবহার করতে চাই সেটা সিলেক্ট করতে হবে। পছন্দের গুগল ফন্টটি নির্বাচন করতে এখানে ক্লিক করুন বা ভিজিট করুন fonts.google.com।
এখানে আপনি গুগলের সকল ফন্ট পেয়ে যাবেন। এখান হতে আপনার পছন্দের ফন্টটি সিলেক্ট করুন।
আমি যেহেতু বাংলা ফন্ট ব্যবহার করবো সেহেতু Language বাংলা সিলেক্ট করবো।
গুগল ফন্টে এই মুহূর্তে ৫ টি বাংলা ফন্ট রয়েছে।
- Hind Siliguri
- Galada
- Atma
- Baloo Da 2
- Mina
উপরোক্ত বাংলা ফন্ট গুলোর মধ্যে Hind Siliguri সবচেয়ে বেশি জনপ্রিয়। তবে ব্যক্তিগত ভাবে আমার Baloo Da 2 ফন্টটি বেশি পছন্দ তাই আমি এটি ব্যবহার করবো।
তবে আপনি আপনার পছন্দের ফন্টটি সিলেক্ট করুন। সকল ফন্টের ক্ষেত্রে প্রসেস একই।
উপরের ছবিটি লক্ষ্য করুন। এখানে দেখতে পাচ্ছেন Baloo Da 2 ফন্টের আনেক গুলো ফন্ট সাইজ দেওয়া রয়েছে যথাক্রমে Regular 400, Medium 500, Semi-bold 600, Bold 700, Extra-bold 800 এবং প্রত্যেকটি ফন্ট সাইজের পাশে “+ Select this style” নামক একটি অপশন রয়েছে।
এখানে আপনি যে ফন্ট সাইজ বা স্টাইল গুলো সিলেক্ট করবেন। শুধু মাত্র সেই ফন্ট সাইজ বা স্টাইল গুলো আপনার সাইটে ব্যবহার করতে পারবেন।
এখানে যদি আপনি কেবল একটি মাত্র ফন্ট সাইজ বা স্টাইল সিলেক্ট করেন তাহলে ঐ একটি ফন্ট সাইজ বা স্টাইল ছাড়া অন্য কোন সাইজ ব্যবহার করতে পারবেন না।
কিন্ত আমরা যেহেতু ব্লগ বা ওয়েবসাইটে কোন আর্টিকেল লেখার সময় আর্টিকেলের টাইটেল অর্থাৎ H1 tag এবং H2, H3 tag এ ভিন্ন ভিন্ন ফন্ট সাইজ ব্যবহার করি। তাই এখানে আমরা কমপক্ষে Regular 400, Medium 500, Semi-bold 600 এবং Bold 700 এই ৪টি ফন্ট সাইজ বা স্টাইল সিলেক্ট করবো।
Baloo Da 2 এর ৪টি ফন্ট সাইজ বা স্টাইল সিলেক্ট করার পর ডান পাশেই উপরের ছবির ন্যায় Selected family অপশনে ফন্ট গুলো ডাউনলোড করার অপশন দেখতে পাবেন।
তবে আমরা যেহেতু HTML এবং CSS ব্যবহার করে গুগল ফন্ট সেটআপ করবো তাই আমরা উক্ত ফন্ট সাইজ বা স্টাইল গুলোর HTML কোড কপি করবো, যার জন্য এখন আমরা Embed অপশনে ক্লিক করবো।
Embed অপশনে ক্লিক করার পর উপরের ছবির ন্যায় Baloo Da 2 ফন্টের HTML এবং CSS কোড পাওয়া যাবে। এখন আমরা উক্ত কোড গুলো কপি করবো এবং আমাদের ওয়ার্ডপ্রেসের থিম এডিট অপশনের এ HTML কোড এবং Aditional CSS অপশনে CSS কোডটি সেভ করবো।
কার্যপ্রনালী ২
Baloo Da 2 ফন্ট এর HTML কোড
| <link href=”https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght@400;500;600;700&display=swap” rel=”stylesheet”> |
এখন প্রথমে আমরা Baloo Da 2 ফন্ট এর HTML কোড আমাদের ওয়ার্ডপ্রেসে যুক্ত করবো। এর জন্য আমরা Appearance থেকে Editor অপশনে Theme Header (header.php) সিলেক্ট করবো।
অতঃপর <heade> সেকশনে আমাদের ফন্টের HTML কোড টি সেভ করবো।
নিচের প্রক্রিয়াটি অনুসরন করুন –
> Appearance
> Editor
> Theme Header (header php)
> অতঃপর <head> সেকশনে ফন্টের
HTML tag টি পেষ্ট করুন এবং
Update File বাটনে ক্লিক করুন।কার্যপ্রনালী ৩
Theme Editor এর Header অপশনে ফন্টের HTML কোড সেভ করার পর এখন আপনাকে CSS কোড Additional CSS অপশনে যুক্ত করতে হবে।
এখানে কিছু কথা বলে নেওয়া প্রয়োজন। এক এক থিমে CSS এর Class name এক এক ধরনের হয়ে থাকে। এখন আপনার মনে প্রশ্ন আসতে পারে Class name বিষয়টা কি?
বিষয়টা আপনাকে উদাহরন সহ বোঝানো যেতে পারে।
| body {font-family: ‘Baloo Da 2’, cursive;} |
উপরের ছকটি লক্ষ্য করুন। এখানে “font-family: ‘Baloo Da 2’, cursive;” এইটুকু হলো আমাদের ফন্টের CSS কোড এবং body শব্দটি দ্বারা Class name বোঝানো হয়েছে।
অর্থাৎ body Class name টি ব্যবহার করার ফলে আমাদের সাইটের বডির সম্পূর্ন ফন্ট স্টাইল পরিবর্তন হয়ে যাবে।
তবে শুধু body এর ফন্ট পরিবর্তন করলেই হবে না। একই সাথে আমাদের আলাদা আলাদা করে H1 , H2 এবং H3 ফন্টের ও স্টাইল পরিবর্তন করতে হবে। এবং এর জন্য আমরা নিচের নির্দেশনা অনুসরন করবো।
body {font-family: 'Baloo Da 2', cursive;}
h1 {font-family: 'Baloo Da 2', cursive;}
h2 {font-family: 'Baloo Da 2', cursive;}
h3 {font-family: 'Baloo Da 2', cursive;}এখন আমাদের সাইটের বডি এবং টাইটেল এর ফন্ট স্টাইল তো পরিবর্তন করলাম। কিন্তু সাইটের নেভিগেশন মেন্যু বারের ফন্ট স্টাইল কিভাবে পরিবর্তন করবো?
ওয়েল – এখানেই আসে মুল বিষয়। আগেই বলেছি এক এক থিমের CSS Class name এক এক ধরনের হয়ে থাকে। আমি যেহেতু GeneratePress থিম ব্যবহার করছি সেহেতু আমার থিমের নেভিগেশন মেন্যু এর CSS Class name ব্যবহার করবো।
| .main-navigation .main-nav ul li a {font-family: ‘Baloo Da 2’, cursive;} |
উপরের ছকটি লক্ষ্য করুন। এখানে Generate Press থিম এর নেভিগেশন মেন্যূ বারের CSS Class name হলো “.main-navigation .main-nav ul li a” এবং বাকিটুকু সেকেন্ড ব্রাকেটের অংশটি হলো ফন্টের CSS কোড।
এখন Additional CSS এ আমরা Class name সহ CSS কোডটি সেভ করবো। তার জন্য নিচের প্রক্রিয়াটি অনুসরন করবো –
Go to WordPress Dashboard
> Appearance
> Customize
> Additional CSS
অতঃপর Additional CSS সেকশনে ফন্টের Class name সহ Css Code গুলো পেষ্ট করুন এবং Publish বাটনে ক্লিক করুন।
=শেষ কথা=
আশা করি কিভাবে কোন প্রকার প্লাগইন ছাড়া ওয়ার্ডপ্রেসে গুগল ফন্ট ব্যবহার করবেন তা বোঝাতে সক্ষম হয়েছি। তবে যে কোন স্থানে সমস্যা বা বুঝতে না পারলে অবশ্যই কমেন্ট বক্সে আমাকে জানাবেন। ইনশাল্লাহ যত দ্রুত সম্ভব সমাধান দেওয়ার চেষ্টা করবো।
পরবর্তী আর্টিকেল পর্যন্ত ভালো থাকবেন সুস্থ থাকবেন। ধন্যবাদ।
ভাই, ওয়েবসাইটে ঢুকলে প্রথমে থিমের ডিফল্ট ফন্ট আসে। তারপর লোডিং শেষ হলে গুগল ফন্টটা সেট হয়। এক্ষেত্রে ডিফল্টভাবেই গুগল ফন্ট সেট আপ করার কোনো ওয়ে আছে?
ধন্যবাদ ভাই।
অবশ্যই আছে ভাই। ডিফল্ট ভাবে ফন্ট সেট করাটাই হল ফন্ট চেঞ্জ করার নিয়ম। তবে লোকাল ভাবে ফন্ট হোস্ট করা তুলনামূলক জটিল প্রক্রিয়া, তাই অনেকে সেই ঝামেলার মধ্যে না গিয়ে প্লাগিন এবং প্লাগিন ছাড়াই ফন্ট সেটাপ করতে চাই, তাদের জন্যই মূলত এই আর্টিকেলটি।
ওয়ার্ডপ্রেসের পরবর্তী আর্টিকেলে ইনশাল্লাহ এ বিষয়ে আলোচনা করব।
আচ্ছা ভাই
ভাই আপনার থিম টা কি প্রিমিয়াম?? নাকি ফ্রি?
প্রিমিয়াম ভাই।