How to Use Bangla Font in HTML: কোডসহ সহজ গাইড

how to use bangla font in html — এই প্রশ্নের উত্তর তিনটি ধাপে: পেজের এনকোডিং UTF-8 করা, একটি ইউনিকোড বাংলা ওয়েব ফন্ট লোড করা, আর CSS-এ সেই ফন্টটি font-family হিসেবে বসানো। এই তিনটির যেকোনো একটি বাদ পড়লে লেখা বক্স (□), ভাঙা যুক্তাক্ষর বা অন্য ফন্টে দেখায়। নিচে প্রতিটি ধাপ কোডসহ দেখানো হলো, যাতে আপনি নিজের HTML পেজে কয়েক মিনিটেই বাংলা ফন্ট যুক্ত করতে পারেন।

ওয়েব ডেভেলপার HTML পেজে বাংলা ফন্ট যুক্ত করার কোড লিখছেন

ধাপ ১: HTML পেজে বাংলা দেখানোর ভিত্তি তৈরি করুন

how to show bangla font in html page — এর প্রথম শর্ত হলো ব্রাউজারকে জানানো যে পেজটি UTF-8 এনকোডিংয়ে লেখা। <head>-এর একদম শুরুতে এই লাইনটি রাখুন এবং <html> ট্যাগে ভাষা হিসেবে বাংলা দিন:

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>আমার বাংলা পেজ</title>
</head>

শুধু মেটা ট্যাগ দিলেই হবে না, ফাইলটিও UTF-8 হিসেবে সেভ করতে হবে। VS Code-এর নিচের স্ট্যাটাস বারে এনকোডিং দেখা যায়; সেখানে UTF-8 না থাকলে “Save with Encoding” দিয়ে বদলে নিন। এনকোডিং কেন জরুরি তা W3C-এর ক্যারেক্টার এনকোডিং গাইডে বিস্তারিত বলা আছে। lang="bn" দিলে ব্রাউজার সঠিক ফন্ট বেছে নিতে ও স্ক্রিন রিডার সঠিক উচ্চারণ করতে পারে।

ধাপ ২: Google Fonts দিয়ে how to add bangla font in html

সবচেয়ে সহজ উপায় হলো Google Fonts। সেখানে Noto Sans Bengali, Hind Siliguri, Baloo Da 2, Tiro Bangla-র মতো বিনামূল্যের ইউনিকোড বাংলা ফন্ট আছে। fonts.google.com-এ গিয়ে ফন্ট বেছে নিন, প্রয়োজনীয় ওয়েট (সাধারণত 400 ও 700) সিলেক্ট করুন, তারপর “Get embed code” থেকে কোড কপি করে <head>-এ বসান:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;700&display=swap" rel="stylesheet">

এরপর CSS-এ ফন্টটি প্রয়োগ করুন। শেষে একটি fallback রাখুন, যাতে কোনো কারণে ফন্ট লোড না হলেও লেখা পড়া যায়:

body {
  font-family: 'Noto Sans Bengali', 'Nirmala UI', 'Vrinda', sans-serif;
  line-height: 1.7;
}

বাংলা অক্ষরের মাত্রা ও কার-চিহ্নের জন্য ইংরেজির চেয়ে একটু বেশি line-height (১.৬–১.৮) দিলে লেখা পরিষ্কার দেখায়। কোন ফন্ট বেছে নেবেন তা নিয়ে দ্বিধা থাকলে আমাদের সেরা বাংলা ফন্টের তুলনা দেখে নিতে পারেন।

ধাপ ৩: নিজের সার্ভারে ফন্ট রেখে how to get bangla font in html

Google-এর সার্ভারের ওপর নির্ভর না করতে চাইলে ফন্ট ফাইলটি নিজের প্রজেক্টে রাখতে পারেন। এতে অফলাইন বা ইন্ট্রানেট পেজেও ফন্ট কাজ করে। ফন্টের WOFF2 ফাইলটি fonts/ ফোল্ডারে রেখে CSS-এ @font-face লিখুন:

@font-face {
  font-family: 'SolaimanLipi';
  src: url('fonts/SolaimanLipi.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
body { font-family: 'SolaimanLipi', sans-serif; }

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

কম্পিউটার স্ক্রিনে HTML পেজে পরিষ্কারভাবে রেন্ডার হওয়া বাংলা ফন্ট

how to use bangla font in html ঠিকমতো হলো কি না যাচাই করুন

পেজে রাইট-ক্লিক করে Inspect খুলুন, বাংলা লেখার একটি এলিমেন্ট সিলেক্ট করুন, তারপর Computed ট্যাবের নিচে “Rendered Fonts” দেখুন। সেখানে আপনার দেওয়া ফন্টের নাম থাকলে ফন্টটি সত্যিই ব্যবহার হচ্ছে। শুধু Styles ট্যাবে font-family দেখে নিশ্চিত হবেন না, কারণ ফন্ট লোড ব্যর্থ হলেও সেখানে নামটি থাকে।

যে ভুলগুলো সবচেয়ে বেশি হয়

লক্ষণ	কারণ	সমাধান
লেখা ‘à¦¬à¦¾’ ধরনের অদ্ভুত চিহ্ন	ফাইল বা সার্ভার UTF-8 নয়	ফাইল UTF-8-এ সেভ করুন, মেটা charset দিন
বাংলার জায়গায় ইংরেজি অক্ষর (যেমন “Avwg”)	SutonnyMJ-এর মতো ANSI ফন্ট ব্যবহার	ইউনিকোড ফন্ট ব্যবহার করুন, লেখাও ইউনিকোডে রাখুন
ফন্ট বদলাচ্ছে না	font-family-র বানান বা ফাইল পাথ ভুল	নাম হুবহু মিলিয়ে দেখুন, Network ট্যাবে 404 খুঁজুন
অন্য ডোমেইন থেকে ফন্ট লোড হয় না	CORS হেডার নেই	ফন্ট একই ডোমেইনে রাখুন বা Access-Control-Allow-Origin দিন

দ্বিতীয় সমস্যাটি সবচেয়ে প্রচলিত। বিজয়ে টাইপ করা লেখা ওয়েবে দিলে তা ইংরেজি অক্ষরের জট হয়ে যায়, কারণ ওয়েব ইউনিকোড বোঝে। পুরোনো লেখা থাকলে আগে বিজয় থেকে ইউনিকোডে কনভার্ট করে নিন। ইউনিকোড আর ANSI-র পার্থক্য বুঝতে ইউনিকোড বাংলা ফন্ট কী লেখাটি পড়ুন।

ল্যাপটপ স্ক্রিনে দুটি বাংলা ওয়েব ফন্টের পাশাপাশি তুলনা

পারফরম্যান্সের জন্য ছোট কিছু পরামর্শ

দুটির বেশি ওয়েট লোড করবেন না; প্রতিটি ওয়েট আলাদা ফাইল।
display=swap রাখুন, যাতে ফন্ট আসার আগেও লেখা দেখা যায়।
শিরোনাম ও বডির জন্য একই ফ্যামিলির দুই ওয়েট ব্যবহার করলে একটিই ফাইল-সেট লাগে।

WordPress সাইটে কাজ করলে কোড না লিখেও এটি করা যায়; সেই পদ্ধতি দেখুন WordPress-এ বাংলা ফন্ট ইনস্টল গাইডে। পুরো ওয়েবসাইটের জন্য ফন্ট পরিকল্পনা জানতে ওয়েবসাইটে বাংলা ফন্ট ব্যবহার লেখাটিও কাজে আসবে। সংক্ষেপে, how to use bangla font in html এর উত্তর হলো: UTF-8, একটি ইউনিকোড ওয়েব ফন্ট আর সঠিক font-family।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী

HTML-এ বাংলা লেখার জন্য কি ফন্ট লাগবেই?

না, ফন্ট না দিলেও ব্যবহারকারীর ডিভাইসে থাকা বাংলা ফন্টে লেখা দেখাবে। তবে প্রতিটি ডিভাইসে আলাদা দেখাবে। সব জায়গায় একই চেহারা চাইলে ওয়েব ফন্ট যুক্ত করুন।

meta charset UTF-8 না দিলে কী হয়?

অনেক সার্ভার ও ব্রাউজারে বাংলা লেখা অর্থহীন চিহ্নে পরিণত হয়। তাই head অংশের শুরুতে meta charset=”UTF-8″ রাখা এবং ফাইলটিও UTF-8-এ সেভ করা জরুরি।

SutonnyMJ ফন্ট কি HTML-এ ব্যবহার করা যায়?

ফন্টটি লোড করা যায়, কিন্তু এটি ANSI ফন্ট। ইউনিকোডে লেখা টেক্সট এতে ঠিক দেখায় না, আর সার্চ ইঞ্জিনও বিজয়ে লেখা টেক্সট বাংলা হিসেবে পড়তে পারে না। ওয়েবের জন্য ইউনিকোড ফন্টই ব্যবহার করুন।

Google Fonts-এর বাংলা ফন্ট কি বাণিজ্যিক সাইটে ফ্রি?

হ্যাঁ, Google Fonts-এর ফন্টগুলো ওপেন লাইসেন্সে দেওয়া, তাই ব্যক্তিগত ও বাণিজ্যিক দুই ধরনের সাইটেই বিনামূল্যে ব্যবহার করা যায়।

কোন ফরম্যাটের ফন্ট ফাইল ব্যবহার করা উচিত?

ওয়েবের জন্য WOFF2 সবচেয়ে ভালো, কারণ এটি ছোট এবং সব আধুনিক ব্রাউজার সমর্থন করে। শুধু TTF থাকলে কনভার্টার দিয়ে WOFF2 বানিয়ে নিন।

How to Use Bangla Font in HTML: ধাপে ধাপে কোডসহ গাইড