React JS Bangla Tutorial

To add Kalpurush font in a Next.js app, follow these simple step-by-step methods. I’ll show the best & easiest way first ✅

✅ Method 1: Add Kalpurush as a Local Font (Recommended)

Step 1: Download Kalpurush Font

Download from:

https://www.omicronlab.com/bangla-fonts.html (opens in a new tab)

You’ll get files like:

Kalpurush.ttf
Kalpurush.ttf (Regular)

Step 2: Create a `fonts` Folder

Inside your project:

/public/fonts/Kalpurush.ttf

Step 3: Use `next/font/local` (Next.js 13+)

This is the official & optimized way.

📁 app/layout.js (or layout.tsx)

import localFont from "next/font/local";
 
const kalpurush = localFont({
  src: "../public/fonts/Kalpurush.ttf",
  variable: "--font-kalpurush",
  weight: "400",
});
 
export default function RootLayout({ children }) {
  return (
    <html lang="bn" className={kalpurush.variable}>
      <body>{children}</body>
    </html>
  );
}

Step 4: Use the Font in CSS

📁 globals.css

body {
  font-family: var(--font-kalpurush), sans-serif;
}

✅ Done! Kalpurush is now applied everywhere 🎉

✅ Method 2: Apply Font to Specific Components

<div className="font-kalpurush">বাংলা লেখা এখানে</div>

Add in globals.css:

.font-kalpurush {
  font-family: var(--font-kalpurush);
}

⚠️ If You Are Using Pages Router (Next.js < 13)

📁 styles/globals.css

@font-face {
  font-family: "Kalpurush";
  src: url("/fonts/Kalpurush.ttf") format("truetype");
  font-weight: normal;
}
 
body {
  font-family: "Kalpurush", sans-serif;
}

💡 Why Kalpurush?

Perfect for Bangla websites
Clean Unicode rendering
Ideal for React / Next.js Bangla blogs & docs

Root Layout Code Example:

import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
 
const kalpurush = localFont({
  src: "../public/fonts/kalpurush.ttf",
  variable: "--font-kalpurush",
});
 
export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="bn">
      <body
        className={`${kalpurush.className} ${kalpurush.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}

Root Page Code Example:

function Homepage() {
  return <h1 className="font-kalpurush-400">আমি বাংলায় গান গাই</h1>;
}
 
export default Homepage;

📄 Why Kalpurush Not Working 📄 100 React Components Used in Day to Day Life