در این مطلب نحوه اضافه کردن فونت فارسی به فریم ورک محبوب Next.js را تنها در چند مرحله ساده فرا خواهیم گرفت.
آموزش رو به صورت مرحله به مرحله پیش می بریم تا درک اون آسونتر باشه.
گام اول: وارد این سایت میشیم تا فونت وزیر رو که یکی از فونت های محبوب فارسی هست دانلود کنیم.
گام دوم: یک پوشه به نام “font” در پوشه “public” پروژه ایجاد و فایل “Vazirmatn-Regular.woff2” رو داخلش کپی می کنیم.
گام سوم: حالا باید فونت اضافه شده رو در پروژه تعریف کنیم، برای این کار فایل layout.tsx رو باز می کنیم و کد زیر رو در اون می نویسیم:
import type { Metadata } from "next";
import "./globals.css";
import localFont from "next/font/local";
const vazirFont = localFont({
src: "../public/font/Vazirmatn-Regular.woff2",
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body data-rsssl=1 className="{vazirFont.className}">
<main>{children}</main>
</body>
</html>
);
}
حالا اگر بخوایم علاوه بر فونت، کلاسهای CSS Tailwind هم به تگ body اضافه کنیم، به شکل زیر عمل می کنیم:
import type { Metadata } from "next";
import "./globals.css";
import localFont from "next/font/local";
export const metadata: Metadata = {
title: "My APP with Next.js 14",
description: "Next.js 14 Learning",
};
const vazirFont = localFont({
src: "../public/font/Vazirmatn-Regular.woff2",
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body data-rsssl=1 className={`bg-slate-900 text-slate-200 ${vazirFont.className}`}>
<main className="p-5">{children}</main>
</body>
</html>
);
}
به همین سادگی و تنها در سه مرحله تونستیم فونت دلخواهمون رو به پروژه Next.js اضافه کنیم.
برای دیدن مطالب آموزشی بیشتر به بلاگ iTsir مراجعه کنید.
