WordPress এ Bangla Font সঠিকভাবে সেট করার সম্পূর্ণ গাইড (Elementor সহ)

WordPress site-এ বাংলা content publish করেন? কিন্তু font render ঠিকমতো হয় না? অক্ষর ভেঙে যায়? Mobile-এ অদ্ভুত দেখায়? এই গাইডে আমরা দেখাবো কীভাবে professional-grade Bangla typography setup করবেন — Elementor Pro সহ যেকোনো theme-এ।

BD Web-এ জনপ্রিয় ৫টা Bangla Font

Method 1: Google Fonts (সহজ এবং Recommended)

Hind Siliguri, Noto Sans Bengali, Baloo Da 2 — তিনটাই Google Fonts-এ available এবং Elementor-এ built-in।

Elementor-এ Add করার উপায়:

1. Elementor edit mode-এ যান
2. যেকোনো text widget select করুন → Typography → Font Family
3. "Hind Siliguri" search করুন → Select
4. Weight: 400 (regular text), 600 (heading) choose করুন

Site-wide Default Font Set করার উপায়:

1. Elementor → Site Settings → Global Fonts
2. "Primary" = Hind Siliguri (body), "Secondary" = Baloo Da 2 (heading)
3. Save → পুরো site-এ apply হবে

Method 2: Self-Hosted Font (Speed Optimization-এর জন্য)

Google Fonts external request করে — page speed কমে। BD user-দের জন্য, যারা slow internet-এ থাকেন, এটা serious issue। Solution: font self-host করুন।

1. Google Fonts থেকে Hind Siliguri ডাউনলোড করুন
2. WOFF2 convert করুন (transfonter.org ব্যবহার করুন)
3. WP Dashboard → Media → Upload (.woff2 file)
4. functions.php-তে add করুন:

@font-face {
  font-family: 'Hind Siliguri';
  src: url('/wp-content/uploads/hind-siliguri.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0980-09FF;
}

font-display: swap এবং unicode-range — এই দুটো critical। প্রথমটা FOIT (invisible text) আটকায়, দ্বিতীয়টা শুধু Bangla character এর জন্য font load করে (English-এ system font use হয়)।

Method 3: WP Bangla Font Plugin

কোডিং না জানলে এই plugin use করুন:

• WP Bangla Font (Sarwar Hasan) — one-click setup, ৫টা Bangla font
• Easy Google Fonts — Customizer-এ font assign

Common Problems এবং Solution

💡 আরও দেখুন: WooCommerce Shop Tutorial

💡 আরও দেখুন: Elementor vs Divi vs Gutenberg

Problem 1: কনজাঙ্কট অক্ষর (যুক্তবর্ণ) ভেঙে দেখায়

Cause: Font-এ proper OpenType feature নেই।
Solution: Noto Sans Bengali বা Hind Siliguri use করুন — দুটাতেই complete conjunct support।

Problem 2: Mobile-এ font size ছোট দেখায়

Solution: CSS-এ minimum font-size set করুন:

@media (max-width: 768px) {
  body { font-size: 16px !important; line-height: 1.8; }
}

Problem 3: Bangla এবং English mix-এ inconsistent look

Solution: Font stack use করুন:

font-family: 'Inter', 'Hind Siliguri', sans-serif;

Problem 4: Elementor-এ Bangla typing করলে blank দেখায়

Solution: Browser-এ Avro keyboard installed থাকতে হবে অথবা Google Input Tools use করুন। Editor-এ visible না হলেও frontend-এ ঠিকঠাক show করবে।

SEO Impact — Bangla Font Setup-এর গুরুত্ব

• User experience: Readable font = কম bounce rate = better Google ranking
• PageSpeed: Self-hosted font + font-display: swap = +5-10 score
• Accessibility: Proper Bangla rendering = visually impaired user দের জন্য screen reader compatibility

Pro Tip: Elementor Pro Global Font Style

Elementor Pro দিয়ে আপনি একবার Global Fonts set করে পুরো site-এ apply করতে পারেন। Heading 1-6 এবং body text-এর জন্য আলাদা font, size, weight, color — একটা page-এ change করলে সব page-এ reflect হয়। এই workflow Elementor Free-তে নেই।

সারাংশ

সঠিক Bangla font setup আপনার WordPress site-কে professional look দেয় এবং BD audience-এর কাছে credibility বাড়ায়। Hind Siliguri + Self-host + Elementor Pro Global Fonts — এই combo দিয়ে আপনি যেকোনো premium Bangla blog/e-commerce-কে টক্কর দিতে পারবেন।