~3 دقیقه مطالعه • بروزرسانی ۲۲ آذر ۱۴۰۴
چرا از next/font استفاده کنیم؟
| مشکل قدیمی | راه‌حل next/font |
|---|---|
| درخواست به گوگل | دانلود در زمان build |
| Layout Shift | CLS = 0 |
| نشت حریم خصوصی | بدون tracker |
| لود کند | فونت محلی |
۱. فونت‌های گوگل — آسان مثل نفس کشیدن
import { Inter, Roboto_Mono } from 'next/font/google'
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
})
const roboto_mono = Roboto_Mono({
subsets: ['latin'],
weight: '400',
variable: '--font-mono',
})در layout:
<html className={`${inter.variable} ${roboto_mono.variable}`}>۲. فونت‌های محلی — عشق سفارشی شما
import localFont from 'next/font/local'
const vazir = localFont({
src: './fonts/Vazir.woff2',
variable: '--font-vazir',
display: 'swap',
})برای چند وزن:
src: [
{ path: './Vazir-Thin.woff2', weight: '100' },
{ path: './Vazir-Regular.woff2', weight: '400' },
{ path: './Vazir-Bold.woff2', weight: '700' },
]۳. ادغام با Tailwind CSS — عشق واقعی
// layout.tsx
<html className={`${inter.variable} ${roboto.variable} antialiased`}>
// tailwind.config.ts
fontFamily: {
sans: ['var(--font-inter)'],
mono: ['var(--font-mono)'],
}در JSX:
<p className="font-sans">متن معمولی</p>
<code className="font-mono">کد</code>۴. فایل تعریف فونت — تمیز و سازمان‌یافته
// styles/fonts.ts
export const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
export const vazir = localFont({ src: './Vazir.woff2', variable: '--font-vazir' })// app/page.tsx
import { inter, vazir } from '@/styles/fonts'
<h1 className={vazir.className}>سلام دنیا</h1>
<p className={inter.className}>خوش آمدید</p>۵. روش‌های اعمال فونت
- className:
<p className={inter.className}> - style:
<p style={inter.style}> - CSS Variable:
font-family: var(--font-inter)
۶. Preloading — فقط آنچه نیاز است
| مکان | چه چیزی preload می‌شود؟ |
|---|---|
| app/layout.tsx | همه صفحات |
| app/dashboard/layout.tsx | فقط داشبورد |
| app/page.tsx | فقط صفحه خانه |
۷. بهترین شیوه‌ها
- ✅ استفاده از
variableبرای Tailwind - ✅ تعریف
subsetsبرای کاهش حجم - ✅ استفاده از
display: 'swap'برای جلوگیری از CLS - ✅ تعریف فونت‌ها در
fonts.tsبرای سازمان بهتر - ✅ استفاده از فونت‌های متغیر (variable fonts)
۸. مثال واقعی: فروشگاه آنلاین
// styles/fonts.ts
export const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
export const playfair = Playfair_Display({ weight: '700', variable: '--font-title' })// layout.tsx
<html className={`${inter.variable} ${playfair.variable}`}>
<body className={inter.className}>{children}</body>
</html>// page.tsx
<h1 className={`${playfair.className} text-4xl`}>فروشگاه من</h1>
<p className="text-lg">بهترین محصولات، بهترین قیمت‌ها</p>۹. چک‌لیست نهایی
- ✅ استفاده از next/font
- ✅ تعریف subsets
- ✅ استفاده از variable برای Tailwind
- ✅ تعریف فونت‌ها در fonts.ts
- ✅ استفاده از display: 'swap'
- ✅ CLS = صفر
نوشته و پژوهش شده توسط دکتر شاهین صیامی