بهینه سازی فونت

next/font به طور خودکار فونت‌های شما (از جمله فونت‌های سفارشی) را بهینه می‌کند و درخواست‌های شبکه خارجی را برای بهبود حریم خصوصی و عملکرد حذف می‌کند.

**🎥 تماشا:**ویدئوی آموزشی: درباره next/font بیشتر بدانید: لینک یوتیوب (زمان ویدیو: ۶ دقیقه) (opens in a new tab)

next/font شامل میزبانی خودکار داخلی برای هر فایل فونت است. این بدان معناست که به لطف ویژگی اساسی size-adjust در CSS، می‌توانید به صورت بهینه وب‌فونت‌ها را بدون هیچ‌گونه تغییر ظاهری بارگیری کنید.

این سیستم فونت جدید همچنین به شما امکان می‌دهد تا به راحتی از تمام فونت‌های گوگل با در نظر گرفتن عملکرد و حریم خصوصی استفاده کنید. فایل‌های CSS و فونت در زمان ساخت دانلود شده و در کنار سایر دارایی‌های استاتیک شما میزبانی می‌شوند. مرورگر هیچ درخواستی به گوگل ارسال نمی‌کند.

فونت های گوگل

به طور خودکار هر فونت گوگل را خودتان میزبانی کنید. فونت‌ها در استقرار گنجانده شده و از همان دامنه‌ای که استقرار شما در آن قرار دارد، ارائه می‌شوند. مرورگر هیچ درخواستی به گوگل ارسال نمی‌کند.

با وارد کردن فونتی که می‌خواهید از next/font/google به عنوان تابع استفاده کنید، شروع کنید. ما برای بهترین عملکرد و انعطاف‌پذیری، استفاده از variable fonts (opens in a new tab) را توصیه می‌کنیم.

app/layout.tsx

import { Inter } from 'next/font/google'
 
// If loading a variable font, you don't need to specify the font weight
const inter = Inter({
	subsets: ['latin'],
	display: 'swap',
})
 
export default function RootLayout({
	children,
}: {
	children: React.ReactNode
}) {
	return (
		<html lang="en" className={inter.className}>
			<body>{children}</body>
		</html>
	)
}

اگر نمی‌توانید از variable font استفاده کنید، باید یک وزن را مشخص کنید:

app/layout.tsx

import { Roboto } from 'next/font/google'
 
const roboto = Roboto({
	weight: '400',
	subsets: ['latin'],
	display: 'swap',
})
 
export default function RootLayout({
	children,
}: {
	children: React.ReactNode
}) {
	return (
		<html lang="en" className={roboto.className}>
			<body>{children}</body>
		</html>
	)
}

می‌توانید با استفاده از یک آرایه، چندین وزن و/یا سبک را مشخص کنید:

app/layout.js

const roboto = Roboto({
	weight: ['400', '700'],
	style: ['normal', 'italic'],
	subsets: ['latin'],
	display: 'swap',
})

خوب است بدانید: برای نام‌های فونت با چند کلمه از زیرخط (_) استفاده کنید. به عنوان مثال، Roboto Mono باید به صورت Roboto_Mono وارد شود.

مشخص کردن یک subset

فونت‌های گوگل به طور خودکار subset (opens in a new tab) می‌شوند. این کار اندازه فایل فونت را کاهش داده و عملکرد را بهبود می‌بخشد. شما باید مشخص کنید که کدام یک از این subsets را می‌خواهید پیش بارگیری preload کنید. مشخص نکردن هیچ subsets در حالی که preload روی true تنظیم شده است، منجر به هشدار می‌شود.

این کار را می‌توان با افزودن آن به فراخوانی تابع انجام داد:

app/layout.tsx

const inter = Inter({ subsets: ['latin'] })

برای اطلاعات بیشتر به مرجع API فونت مراجعه کنید.

استفاده از چندین فونت

می‌توانید چندین فونت را در برنامه خود وارد کرده و استفاده کنید. دو رویکرد وجود دارد که می‌توانید در پیش بگیرید.

روش اول ایجاد یک تابع کمکی است که یک فونت را صادر می‌کند، آن را وارد می‌کند و در صورت نیاز className آن را اعمال می‌کند. این امر تضمین می‌کند که فونت فقط در صورت رندر شدن پیش‌بارگذاری preloaded شود:

app/fonts.ts

import { Inter, Roboto_Mono } from 'next/font/google'
 
export const inter = Inter({
	subsets: ['latin'],
	display: 'swap',
})
 
export const roboto_mono = Roboto_Mono({
	subsets: ['latin'],
	display: 'swap',
})

app/layout.tsx

import { inter } from './fonts'
 
export default function Layout({ children }: { children: React.ReactNode }) {
	return (
		<html lang="en" className={inter.className}>
			<body>
				<div>{children}</div>
			</body>
		</html>
	)
}

app/page.tsx

import { roboto_mono } from './fonts'
 
export default function Page() {
	return (
		<>
			<h1 className={roboto_mono.className}>My page</h1>
		</>
	)
}

در مثال بالا، Inter به صورت سراسری اعمال می‌شود و Roboto Mono را می‌توان در صورت نیاز ایمپورت و اعمال کرد.

همچنین می‌توانید یک CSS variable ایجاد کرده و از آن با راه‌حل CSS ترجیحی خود استفاده کنید:

app/layout.tsx

import { Inter, Roboto_Mono } from 'next/font/google'
import styles from './global.css'
 
const inter = Inter({
	subsets: ['latin'],
	variable: '--font-inter',
	display: 'swap',
})
 
const roboto_mono = Roboto_Mono({
	subsets: ['latin'],
	variable: '--font-roboto-mono',
	display: 'swap',
})
 
export default function RootLayout({
	children,
}: {
	children: React.ReactNode
}) {
	return (
		<html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
			<body>
				<h1>My App</h1>
				<div>{children}</div>
			</body>
		</html>
	)
}

app/global.css

html {
	font-family: var(--font-inter);
}
 
h1 {
	font-family: var(--font-roboto-mono);
}

در مثال بالا، Inter به صورت سراسری اعمال می‌شود و هر تگ <h1> با Roboto Mono استایل‌دهی می‌شود.

توصیه: از چندین فونت با احتیاط استفاده کنید، زیرا هر فونت جدید یک منبع اضافی است که کاربر باید دانلود کند.

فونت های لوکال

next/font/local را ایمپورت کنید و src فایل فونت محلی خود را مشخص کنید. ما برای بهترین عملکرد و انعطاف‌پذیری، استفاده از variable fonts (opens in a new tab) را توصیه می‌کنیم.

app/layout.tsx

import localFont from 'next/font/local'
 
// Font files can be colocated inside of `app`
const myFont = localFont({
	src: './my-font.woff2',
	display: 'swap',
})
 
export default function RootLayout({
	children,
}: {
	children: React.ReactNode
}) {
	return (
		<html lang="en" className={myFont.className}>
			<body>{children}</body>
		</html>
	)
}

اگر می‌خواهید از چندین فایل برای یک خانواده فونت استفاده کنید، src می‌تواند یک آرایه باشد:

const roboto = localFont({
	src: [
		{
			path: './Roboto-Regular.woff2',
			weight: '400',
			style: 'normal',
		},
		{
			path: './Roboto-Italic.woff2',
			weight: '400',
			style: 'italic',
		},
		{
			path: './Roboto-Bold.woff2',
			weight: '700',
			style: 'normal',
		},
		{
			path: './Roboto-BoldItalic.woff2',
			weight: '700',
			style: 'italic',
		},
	],
})

برای اطلاعات بیشتر به مرجع API فونت : مراجعه کنید.

با Tailwind CSS

next/font را می‌توان از طریق یک CSS variable با Tailwind CSS (opens in a new tab) استفاده کرد.

در مثال زیر، ما از فونت Inter از next/font/google (می‌توانید از هر فونتی از Google یا فونت‌های لوکال استفاده کنید) استفاده می‌کنیم. فونت خود را با گزینه variable بارگذاری کنید تا نام CSS variable خود را تعریف کنید و آن را به inter اختصاص دهید. سپس از inter.variable برای افزودن CSS variable به سند HTML خود استفاده کنید.

app/layout.tsx

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'],
	display: 'swap',
	variable: '--font-roboto-mono',
})
 
export default function RootLayout({
	children,
}: {
	children: React.ReactNode
}) {
	return (
		<html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
			<body>{children}</body>
		</html>
	)
}

در نهایت، CSS variable را به پیکربندی Tailwind CSS خود اضافه کنید:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: [
		'./pages/**/*.{js,ts,jsx,tsx}',
		'./components/**/*.{js,ts,jsx,tsx}',
		'./app/**/*.{js,ts,jsx,tsx}',
	],
	theme: {
		extend: {
			fontFamily: {
				sans: ['var(--font-inter)'],
				mono: ['var(--font-roboto-mono)'],
			},
		},
	},
	plugins: [],
}

اکنون می‌توانید از کلاس‌های کمکی font-sans و font-mono برای اعمال فونت به عناصر خود استفاده کنید.

پیش‌ بارگیری Preloading

زمانی که یک تابع فونت در صفحه‌ای از سایت شما فراخوانده می‌شود، به صورت سراسری در دسترس نبوده و در تمام مسیرها پیش‌بارگذاری preloaded نمی‌شود. در عوض، فونت فقط بر اساس نوع فایلی که در آن استفاده می‌شود، در مسیرهای مرتبط پیش‌ بارگذاری preloaded می‌شود:

اگر صفحه‌ای منحصربه‌فرد unique page باشد، در مسیر منحصربه‌فرد آن صفحه پیش‌بارگذاری می‌شود.
اگر یک طرح بندی باشد، در تمام مسیرهایی که توسط طرح بندی پوشانده شده‌اند، پیش‌بارگذاری می‌شود.
اگر طرح بندی ریشه باشد، در تمام مسیرها پیش‌بارگذاری preloaded می‌شود.

استفاده مجدد از فونت‌ها

هر بار که تابع localFont یا فونت گوگل را فراخوانی می‌کنید، آن فونت به عنوان یک نمونه instance در برنامه شما میزبانی می‌شود. بنابراین، اگر همان تابع فونت را در چندین فایل بارگذاری کنید، چندین نمونه از یک فونت یکسان میزبانی می‌شوند. در این شرایط، توصیه می‌شود موارد زیر را انجام دهید:

تابع بارگذاری فونت را در یک فایل مشترک فراخوانی کنید.
آن را به عنوان یک ثابت constant صادر export کنید
ثابت را در هر فایلی که می‌خواهید از این فونت استفاده کنید، وارد کنید.

ویدئوها Metadata