Next.js এ Custom Fonts লোড করা এবং ব্যবস্থাপনা করা খুবই সহজ এবং এটি আপনার ওয়েবসাইটের ডিজাইন এবং ব্র্যান্ডিংকে উন্নত করতে সাহায্য করে। আপনি গুগল ফন্টস (Google Fonts), অ্যাডোব ফন্টস (Adobe Fonts), বা কাস্টম ফন্ট ফাইল ব্যবহার করে আপনার পেজে ফন্ট লোড করতে পারেন। Next.js এর মধ্যে ফন্ট ব্যবস্থাপনা সহজ এবং দক্ষতার সাথে করা যায়।
এই টিউটোরিয়ালে আমরা দেখব কিভাবে আপনি Custom Fonts লোড এবং ব্যবস্থাপনা করতে পারেন।
১. গুগল ফন্টস (Google Fonts) ব্যবহার করা
Next.js এ গুগল ফন্টস ব্যবহার করা অত্যন্ত সহজ। এর জন্য <Head> কম্পোনেন্ট ব্যবহার করে আপনি সহজেই ফন্ট ফাইলের লিঙ্ক অন্তর্ভুক্ত করতে পারেন।
গুগল ফন্ট লোড করার উদাহরণ:
// pages/_app.js
import Head from 'next/head';
import '../styles/globals.css';
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet"
/>
</Head>
<Component {...pageProps} />
</>
);
}
export default MyApp;
ব্যাখ্যা:
<link>ট্যাগ ব্যবহার করে, গুগল ফন্টসের Roboto ফন্টটি লোড করা হয়েছে।display=swapএর মাধ্যমে ফন্ট সুইচিংয়ের সময় একটি ফন্ট ফ্যালব্যাক নীতি নির্ধারণ করা হয়, যা ব্যবহারকারী যখন ফন্ট লোড না হয় তখন কিছু সময়ের জন্য একটি বেসিক ফন্ট ব্যবহার করবে।
২. কাস্টম ফন্ট ফাইল (Font Files) ব্যবহার করা
আপনি যদি নিজের কাস্টম ফন্ট ব্যবহার করতে চান (যেমন .woff, .woff2, .ttf, .otf), তবে আপনাকে সেই ফন্ট ফাইলগুলো public ফোল্ডারে রাখতে হবে এবং CSS ফাইলের মাধ্যমে সেগুলো লিঙ্ক করতে হবে।
কাস্টম ফন্ট ফাইল লোড করার উদাহরণ:
- ফন্ট ফাইলগুলো
public/fonts/ফোল্ডারে রাখুন: উদাহরণস্বরূপ,public/fonts/Roboto-Regular.woff2। - CSS ফাইলে কাস্টম ফন্ট ডিফাইন করা:
/* styles/globals.css */
@font-face {
font-family: 'Roboto';
src: url('/fonts/Roboto-Regular.woff2') format('woff2'),
url('/fonts/Roboto-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
body {
font-family: 'Roboto', sans-serif;
}
ব্যাখ্যা:
@font-faceএর মাধ্যমে আপনি কাস্টম ফন্টের ফাইলের পথ (path) এবং ফন্ট ফরম্যাট (woff2, woff) নির্ধারণ করেছেন।- এই ফন্টটি
bodyট্যাগের জন্য ডিফল্ট ফন্ট হিসেবে নির্ধারণ করা হয়েছে।
৩. Next.js এর next/font ব্যবহার করে ফন্ট অপটিমাইজেশন
Next.js 13 থেকে একটি নতুন ফিচার এসেছে, যা হল next/font। এটি স্বয়ংক্রিয়ভাবে ফন্ট লোডিং এবং অপটিমাইজেশন হ্যান্ডেল করে, যা আপনার পেজের লোডিং টাইম কমাতে সাহায্য করে। next/font ব্যবহার করে আপনি কাস্টম এবং গুগল ফন্ট উভয়ই অপটিমাইজড ভাবে লোড করতে পারবেন।
next/font ব্যবহার করে গুগল ফন্ট লোড করার উদাহরণ:
// pages/_app.js
import { Roboto } from 'next/font/google';
import '../styles/globals.css';
const roboto = Roboto({
subsets: ['latin'],
weight: ['400', '700'],
display: 'swap',
});
function MyApp({ Component, pageProps }) {
return (
<div className={roboto.className}>
<Component {...pageProps} />
</div>
);
}
export default MyApp;
ব্যাখ্যা:
next/font/googleথেকে গুগল ফন্টটি ইমপোর্ট করা হয়েছে এবংRobotoফন্টের জন্য অপটিমাইজেশন করা হয়েছে।subsetsএবংweightএর মাধ্যমে আপনি নির্দিষ্ট ফন্ট ওয়েট এবং সাবসেট চয়ন করতে পারেন।display: 'swap'ব্যবহার করা হয়েছে যাতে ফন্ট লোড না হওয়া পর্যন্ত একটি বেসিক ফন্ট দেখানো হয়।
৪. ফন্ট কাস্টমাইজেশন এবং ভিন্ন ভিন্ন ফন্ট স্টাইলস
Next.js এ আপনি বিভিন্ন ধরনের ফন্ট স্টাইলস এবং ফন্ট ওয়েট (যেমন, বোল্ড, Italic) ব্যবহার করতে পারবেন। এর মাধ্যমে আপনি আপনার ওয়েবসাইটের ডিজাইন আরও আকর্ষণীয় এবং ব্র্যান্ডিং অনুযায়ী কাস্টমাইজ করতে পারেন।
উদাহরণ:
// pages/_app.js
import { Inter } from 'next/font/google';
import '../styles/globals.css';
const inter = Inter({
subsets: ['latin'],
weight: ['400', '500', '600', '700'],
style: 'normal',
display: 'swap',
});
function MyApp({ Component, pageProps }) {
return (
<div className={inter.className}>
<Component {...pageProps} />
</div>
);
}
export default MyApp;
ব্যাখ্যা:
- এখানে Inter ফন্টের weight গুলো ৪০০, ৫০০, ৬০০, ৭০০ নির্ধারণ করা হয়েছে, যাতে আপনি বিভিন্ন ফন্ট স্টাইল এবং ওয়েট ব্যবহার করতে পারেন।
৫. ফন্ট লোডিং অপটিমাইজেশন
Next.js আপনাকে স্বয়ংক্রিয়ভাবে ফন্ট লোডিং অপটিমাইজ করে। তবে, আপনি নিজের মতো করে ফন্ট লোডিং প্রক্রিয়াও কাস্টমাইজ করতে পারেন, যেমন ফন্ট লোডিং টাইপ নিয়ন্ত্রণ করা বা ফন্ট ফ্যালব্যাক স্টাইল নির্ধারণ করা।
উদাহরণ:
/* styles/globals.css */
body {
font-family: 'Roboto', sans-serif;
font-display: swap;
}
ব্যাখ্যা:
font-display: swap;নির্দেশ করে যে ফন্ট লোড না হওয়া পর্যন্ত একটি বেসিক ফন্ট শো করবে এবং পরে ফন্ট লোড হওয়ার পর তা পরিবর্তন হবে।
সারাংশ
Next.js এ কাস্টম ফন্ট লোড করা এবং ব্যবস্থাপনা করা বেশ সহজ এবং বিভিন্ন পদ্ধতিতে এটি করা সম্ভব। আপনি গুগল ফন্টস বা কাস্টম ফন্ট ফাইল ব্যবহার করতে পারেন এবং next/font এর মাধ্যমে ফন্ট অপটিমাইজেশন এবং লোডিং কন্ট্রোল করতে পারেন। এর ফলে, আপনি আপনার ওয়েবসাইটের ফন্ট ব্যবস্থাপনাকে আরও কার্যকরী এবং দ্রুত লোডিংযোগ্য করতে পারবেন।
Read more
