how to use bangla font in website — এর সঠিক উত্তর নির্ভর করে আপনার সাইট কীভাবে বানানো। নিজে কোড লিখলে এক পদ্ধতি, WordPress-এ আরেক, আর Wix বা Shopify-র মতো বিল্ডারে আরেক। তবে সব ক্ষেত্রে মূল নিয়ম একটাই: লেখা ইউনিকোডে হতে হবে এবং একটি ইউনিকোড বাংলা ওয়েব ফন্ট লোড করতে হবে। এই গাইডে আগে পদ্ধতি বেছে নেওয়া, তারপর ফন্ট যুক্ত করা ও সমস্যা সমাধান দেখানো হলো।
how to use bangla font in website: তিনটি পথ
| পদ্ধতি | কাদের জন্য | সুবিধা | সীমাবদ্ধতা |
|---|---|---|---|
| Google Fonts লিংক | বেশিরভাগ সাইট | ফ্রি, সেটআপ ৫ মিনিট | বাইরের সার্ভারে নির্ভরশীল |
| নিজের সার্ভারে হোস্ট (@font-face) | SolaimanLipi, Kalpurush বা কেনা ফন্ট | পুরো নিয়ন্ত্রণ, দ্রুত | লাইসেন্স ও ফাইল নিজেকে সামলাতে হয় |
| সিস্টেম ফন্ট | খুব হালকা সাইট | কোনো ডাউনলোড নেই | ফোন ও পিসিতে আলাদা দেখায় |
নতুন সাইটের জন্য Google Fonts-ই সবচেয়ে বাস্তব পছন্দ। ব্র্যান্ডের নিজস্ব ফন্ট থাকলে বা বাইরের সার্ভার এড়াতে চাইলে নিজে হোস্ট করুন।
how to use google bangla font in my website
- fonts.google.com-এ যান, বামের ফিল্টারে Language থেকে Bengali বেছে নিন। তাহলে শুধু বাংলা অক্ষর সমর্থন করে এমন ফন্ট দেখাবে।
- প্রিভিউ বক্সে নিজের একটি বাক্য লিখে Hind Siliguri, Noto Sans Bengali, Anek Bangla ইত্যাদি তুলনা করুন।
- ফন্ট পেজে Get font → Get embed code ক্লিক করুন এবং 400 ও 700 ওয়েট রাখুন।
- দেওয়া
<link>কোডটি সাইটের<head>-এ বসান, আর CSS-এfont-family: 'Hind Siliguri', sans-serif;দিন।
কোডের প্রতিটি লাইন আর meta charset কেন লাগে, তা বিস্তারিত দেখুন HTML-এ বাংলা ফন্ট ব্যবহারের গাইডে। Google নিজে কোন বাংলা ফন্ট ব্যবহার করে তা জানতে পড়ুন Google কোন বাংলা ফন্ট ব্যবহার করে।
how can i embed bangla font in a website নিজের ফাইল দিয়ে
SolaimanLipi বা Kalpurush-এর মতো পরিচিত ফন্ট Google Fonts-এ নেই। এগুলো এমবেড করতে ফন্টের WOFF2 ফাইল সার্ভারে আপলোড করুন এবং CSS-এ একটি @font-face নিয়ম লিখুন:
@font-face {
font-family: 'Kalpurush';
src: url('/fonts/kalpurush.woff2') format('woff2');
font-display: swap;
}
h1, h2, p { font-family: 'Kalpurush', 'Noto Sans Bengali', sans-serif; }দ্বিতীয় ফন্টটি (এখানে Noto Sans Bengali) fallback হিসেবে কাজ করে। ফন্ট লোডিং দ্রুত করার আরও কৌশল Google-এর web.dev ফন্ট বেস্ট প্র্যাকটিস গাইডে আছে।
বিল্ডার বা CMS-এ how to add bangla font in website
- WordPress: থিমের Customizer বা প্লাগইন দিয়ে কোড ছাড়াই সম্ভব। ধাপগুলো আছে WordPress বাংলা ফন্ট গাইডে।
- Blogger: Theme → Edit HTML-এ লিংক ও CSS বসাতে হয়; দেখুন Blogger-এ বাংলা ফন্ট।
- Wix / Shopify: দুটোতেই থিম সেটিংসে কাস্টম ফন্ট আপলোডের অপশন আছে; সেখানে WOFF2 ফাইল দিয়ে হেডিং ও বডিতে বসিয়ে দিন।
how to fix bangla font for website: প্রচলিত সমস্যা
বাংলার জায়গায় ইংরেজি অক্ষরের জট: লেখাটি বিজয়ে (ANSI) টাইপ করা। ওয়েবে দেওয়ার আগে ইউনিকোডে কনভার্ট করুন।
যুক্তাক্ষর ভেঙে যাচ্ছে: CSS-এ letter-spacing দেওয়া থাকলে বাংলা অক্ষরের কার ও যুক্তাক্ষর আলাদা হয়ে যায়। বাংলা টেক্সটে এটি normal রাখুন। অনেক পুরোনো ফ্রি ফন্টেও যুক্তাক্ষর অসম্পূর্ণ, সেক্ষেত্রে ফন্ট বদলান।
ফোনে অন্য ফন্টে দেখায়: ওয়েব ফন্ট লোড হচ্ছে না, তাই ফোন নিজের ফন্ট দেখাচ্ছে। ব্রাউজারের Network ট্যাবে ফন্ট ফাইলটি 200 দিচ্ছে কি না দেখুন, আর ক্যাশিং প্লাগইন থাকলে ক্যাশ ক্লিয়ার করুন।
লেখা বক্স বা অদ্ভুত চিহ্ন: এটি সাধারণত এনকোডিং সমস্যা। বিস্তারিত সমাধান দেখুন বাংলা ফন্ট না দেখালে কী করবেন লেখায়।
লাইভ করার আগে ছোট চেকলিস্ট
- অ্যান্ড্রয়েড Chrome, iPhone Safari ও Windows-এ একবার করে পেজ খুলে দেখুন।
- বডি টেক্সট অন্তত 16px ও line-height ১.৬–১.৮ রাখুন।
- মোট ফন্ট ফাইল ২০০KB-এর নিচে রাখার চেষ্টা করুন।
এগুলো মেনে চললেই how to use bangla font in website প্রশ্নের কাজ সম্পূর্ণ। কোন ফন্ট পড়তে সবচেয়ে আরামদায়ক তা জানতে দেখুন সেরা বাংলা ফন্ট।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
ওয়েবসাইটের জন্য কোন বাংলা ফন্ট ভালো?
বডি টেক্সটের জন্য Noto Sans Bengali বা Hind Siliguri পড়তে আরামদায়ক ও Google Fonts-এ ফ্রি। শিরোনামে একটু বিশেষ চেহারা চাইলে Anek Bangla বা Baloo Da 2 ব্যবহার করতে পারেন।
বাংলা ফন্ট যোগ করলে কি সাইট স্লো হয়?
দুটি ওয়েট ও WOFF2 ফরম্যাট ব্যবহার করলে প্রভাব খুব কম। বেশি ওয়েট বা অনেকগুলো আলাদা ফন্ট লোড করলেই সাইট ধীর হয়।
SolaimanLipi কি Google Fonts-এ পাওয়া যায়?
না। SolaimanLipi ব্যবহার করতে হলে ফন্ট ফাইলটি নিজের সার্ভারে আপলোড করে @font-face দিয়ে এমবেড করতে হয়।
ওয়েবসাইটে বিজয়ে লেখা পোস্ট করলে কী হয়?
বিজয়ের ANSI লেখা ওয়েবে ইংরেজি অক্ষরের জট হয়ে দেখায় এবং Google সার্চেও আসে না। পোস্ট করার আগে ইউনিকোডে কনভার্ট করুন।
বাংলা ও ইংরেজির জন্য আলাদা ফন্ট দেওয়া যায়?
হ্যাঁ। font-family তালিকায় আগে ইংরেজি ফন্ট, পরে বাংলা ফন্ট দিলে ব্রাউজার ইংরেজি অক্ষর প্রথম ফন্ট থেকে আর বাংলা অক্ষর দ্বিতীয় ফন্ট থেকে নেয়।