وحدة الخطوط

next/font يقوم بتحسين خطوطك تلقائيًا (بما في ذلك الخطوط المخصصة) وإزالة طلبات الشبكة الخارجية لتحسين الخصوصية والأداء.

يتضمن استضافة ذاتية تلقائية مدمجة لأي ملف خط. هذا يعني أنه يمكنك تحميل خطوط الويب بشكل مثالي دون أي انزياح في التخطيط.

يمكنك أيضًا استخدام جميع خطوط جوجل بسهولة. يتم تنزيل ملفات CSS والخطوط في وقت البناء واستضافتها ذاتيًا مع باقي الأصول الثابتة. لا يتم إرسال أي طلبات إلى جوجل من المتصفح.

لاستخدام الخط في جميع صفحاتك، أضفه إلى ملف _app.js تحت /pages كما هو موضح أدناه:

import { Inter } from 'next/font/google'

// إذا كنت تحمل خطًا متغيرًا، فلن تحتاج إلى تحديد وزن الخط
const inter = Inter({ subsets: ['latin'] })

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}

🎥 شاهد: تعرف على المزيد حول استخدام next/font → يوتيوب (6 دقائق).

المرجع

src

مسار ملف الخط كسلسلة أو مصفوفة كائنات (من نوع Array<{path: string, weight?: string, style?: string}>) بالنسبة إلى الدليل الذي يتم فيه استدعاء دالة محمل الخط.

مستخدم في next/font/local

• مطلوب

أمثلة:

• src:'./fonts/my-font.woff2' حيث يتم وضع my-font.woff2 في دليل باسم fonts داخل دليل app
• src:[{path: './inter/Inter-Thin.ttf', weight: '100',},{path: './inter/Inter-Regular.ttf',weight: '400',},{path: './inter/Inter-Bold-Italic.ttf', weight: '700',style: 'italic',},]
• إذا تم استدعاء دالة محمل الخط في app/page.tsx باستخدام src:'../styles/fonts/my-font.ttf'، فإن my-font.ttf يوضع في styles/fonts في جذر المشروع

weight

وزن الخط مع الاحتمالات التالية:

• سلسلة بقيم الأوزان المتاحة للخط المحدد أو نطاق من القيم إذا كان خطًا متغيرًا
• مصفوفة بقيم الوزن إذا لم يكن الخط خط جوجل متغير. ينطبق فقط على next/font/google.

مستخدم في next/font/google و next/font/local

• مطلوب إذا كان الخط المستخدم ليس متغيرًا

أمثلة:

• weight: '400': سلسلة لقيمة وزن واحدة - للخط Inter، القيم الممكنة هي '100', '200', '300', '400', '500', '600', '700', '800', '900' أو 'variable' حيث 'variable' هي الافتراضية)
• weight: '100 900': سلسلة للنطاق بين 100 و 900 لخط متغير
• weight: ['100','400','900']: مصفوفة بثلاث قيم ممكنة لخط غير متغير

style

نمط الخط مع الاحتمالات التالية:

• سلسلة قيمة بقيمة افتراضية 'normal'
• مصفوفة بقيم النمط إذا لم يكن الخط خط جوجل متغير. ينطبق فقط على next/font/google.

مستخدم في next/font/google و next/font/local

• اختياري

أمثلة:

• style: 'italic': سلسلة - يمكن أن تكون normal أو italic لـ next/font/google
• style: 'oblique': سلسلة - يمكن أن تأخذ أي قيمة لـ next/font/local ولكن من المتوقع أن تكون من أنماط الخطوط القياسية
• style: ['italic','normal']: مصفوفة بقيمتين لـ next/font/google - القيم من normal و italic

subsets

مجموعات فرعية الخط المحددة بمصفوفة قيم سلسلة بأسماء كل مجموعة فرعية تريد تحميلها مسبقًا. سيتم حقق علامة تحميل مسبق للرأس عند تعيين خيار preload على true، وهو الافتراضي.

مستخدم في next/font/google

• اختياري

أمثلة:

• subsets: ['latin']: مصفوفة بالمجموعة الفرعية latin

يمكنك العثور على قائمة بجميع المجموعات الفرعية في صفحة جوجل للخط الخاص بك.

axes

بعض الخطوط المتغيرة تحتوي على محاور إضافية يمكن تضمينها. افتراضيًا، يتم تضمين وزن الخط فقط لتقليل حجم الملف. تعتمد القيم الممكنة لـ axes على الخط المحدد.

مستخدم في next/font/google

• اختياري

أمثلة:

• axes: ['slnt']: مصفوفة بقيمة slnt للخط المتغير Inter الذي يحتوي على slnt كمحاور إضافية كما هو موضح هنا. يمكنك العثور على قيم axes الممكنة لخطك باستخدام الفلتر في صفحة خطوط جوجل المتغيرة والبحث عن محاور غير wght

display

عرض الخط بقيم سلسلة ممكنة لـ 'auto', 'block', 'swap', 'fallback' أو 'optional' بقيمة افتراضية 'swap'.

مستخدم في next/font/google و next/font/local

• اختياري

أمثلة:

• display: 'optional': سلسلة معينة لقيمة optional

preload

قيمة منطقية تحدد ما إذا كان يجب تحميل الخط مسبقًا أم لا. الافتراضي هو true.

مستخدم في next/font/google و next/font/local

• اختياري

أمثلة:

• preload: false

fallback

الخط الاحتياطي لاستخدامه إذا تعذر تحميل الخط. مصفوفة سلاسل للخطوط الاحتياطية بدون افتراضي.

• اختياري

مستخدم في next/font/google و next/font/local

أمثلة:

• fallback: ['system-ui', 'arial']: مصفوفة تعيين الخطوط الاحتياطية إلى system-ui أو arial

adjustFontFallback

• لـ next/font/google: قيمة منطقية تحدد ما إذا كان يجب استخدام خط احتياطي تلقائي لتقليل انزياح التخطيط التراكمي. الافتراضي هو true.
• لـ next/font/local: قيمة سلسلة أو منطقية false تحدد ما إذا كان يجب استخدام خط احتياطي تلقائي لتقليل انزياح التخطيط التراكمي. القيم الممكنة هي 'Arial', 'Times New Roman' أو false. الافتراضي هو 'Arial'.

مستخدم في next/font/google و next/font/local

• اختياري

أمثلة:

• adjustFontFallback: false: لـ next/font/google
• adjustFontFallback: 'Times New Roman': لـ next/font/local

variable

قيمة سلسلة لتحديد اسم متغير CSS لاستخدامه إذا تم تطبيق النمط بطريقة متغير CSS.

مستخدم في next/font/google و next/font/local

• اختياري

أمثلة:

• variable: '--my-font': يتم تعريف متغير CSS --my-font

declarations

مصفوفة أزواج مفتاح-قيمة لـ واصفات وجه الخط التي تحدد @font-face المُنشأة بشكل أكبر.

مستخدم في next/font/local

• اختياري

أمثلة:

• declarations: [{ prop: 'ascent-override', value: '90%' }]

أمثلة

خطوط جوجل

لاستخدام خط جوجل، قم باستيراده من next/font/google كدالة. نوصي باستخدام الخطوط المتغيرة للحصول على أفضل أداء ومرونة.

لاستخدام الخط في جميع صفحاتك، أضفه إلى ملف _app.js تحت /pages كما هو موضح أدناه:

import { Inter } from 'next/font/google'

// إذا كنت تحمل خطًا متغيرًا، فلن تحتاج إلى تحديد وزن الخط
const inter = Inter({ subsets: ['latin'] })

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}

إذا لم تتمكن من استخدام خط متغير، فسوف تحتاج إلى تحديد وزن:

import { Roboto } from 'next/font/google'

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
})

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={roboto.className}>
      <Component {...pageProps} />
    </main>
  )
}

يمكنك تحديد أوزان و/أو أنماط متعددة باستخدام مصفوفة:

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

جيد أن تعرف: استخدم شرطة سفلية (_) لأسماء الخطوط التي تحتوي على كلمات متعددة. على سبيل المثال، Roboto Mono يجب استيراده كـ Roboto_Mono.

تطبيق الخط في <head>

يمكنك أيضًا استخدام الخط بدون غلاف و className عن طريق حقنه داخل <head> كما يلي:

import { Inter } from 'next/font/google'

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

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <style jsx global>{`
        html {
          font-family: ${inter.style.fontFamily};
        }
      `}</style>
      <Component {...pageProps} />
    </>
  )
}

استخدام صفحة واحدة

لاستخدام الخط في صفحة واحدة، أضفه إلى الصفحة المحددة كما هو موضح أدناه:

import { Inter } from 'next/font/google'

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

export default function Home() {
  return (
    <div className={inter.className}>
      <p>Hello World</p>
    </div>
  )
}

تحديد مجموعة فرعية

يتم تقسيم خطوط جوجل تلقائيًا. هذا يقلل من حجم ملف الخط ويحسن الأداء. ستحتاج إلى تحديد أي من هذه المجموعات الفرعية تريد تحميلها مسبقًا. الفشل في تحديد أي مجموعات فرعية بينما preload مضبوط على true سيؤدي إلى تحذير.

يمكن القيام بذلك عن طريق إضافته إلى استدعاء الدالة:

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

عرض مرجع واجهة برمجة تطبيق الخط لمزيد من المعلومات.

استخدام خطوط متعددة

يمكنك استيراد واستخدام عدة خطوط في تطبيقك. هناك طريقتان يمكنك اتباعهما.

الطريقة الأولى هي إنشاء دالة مساعدة (utility function) تقوم بتصدير خط، استيراده، وتطبيق className الخاص به حيثما تحتاج. هذا يضمن تحميل الخط مسبقًا فقط عند عرضه:

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',
})

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',
})

في المثال أعلاه، سيتم تطبيق Inter بشكل عام، ويمكن استيراد Roboto Mono وتطبيقه حسب الحاجة.

بدلاً من ذلك، يمكنك إنشاء متغير CSS واستخدامه مع حل CSS المفضل لديك:

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

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

في المثال أعلاه، سيتم تطبيق Inter بشكل عام، وسيتم تنسيق أي علامات <h1> باستخدام Roboto Mono.

توصية: استخدم عدة خطوط بحذر حيث أن كل خط جديد يمثل موردًا إضافيًا يجب على العميل تنزيله.

الخطوط المحلية

استورد next/font/local وحدد src لملف الخط المحلي الخاص بك. نوصي باستخدام الخطوط المتغيرة (variable fonts) للحصول على أفضل أداء ومرونة.

import localFont from 'next/font/local'

// يمكن وضع ملفات الخطوط داخل مجلد `pages`
const myFont = localFont({ src: './my-font.woff2' })

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={myFont.className}>
      <Component {...pageProps} />
    </main>
  )
}

إذا كنت ترغب في استخدام عدة ملفات لعائلة خط واحدة، يمكن أن يكون 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',
    },
  ],
})

راجع مرجع Font API لمزيد من المعلومات.

مع Tailwind CSS

يتكامل next/font بسلاسة مع Tailwind CSS باستخدام متغيرات CSS.

في المثال أدناه، نستخدم خطوط Inter و Roboto_Mono من next/font/google (يمكنك استخدام أي خط من Google أو خط محلي). استخدم خيار variable لتحديد اسم متغير CSS، مثل inter و roboto_mono لهذه الخطوط على التوالي. ثم طبق inter.variable و roboto_mono.variable لتضمين متغيرات CSS في مستند HTML الخاص بك.

جيد أن تعرف: يمكنك إضافة هذه المتغيرات إلى علامة <html> أو <body>، حسب تفضيلك، احتياجات التنسيق أو متطلبات المشروع.

import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={`${inter.variable} ${roboto_mono.variable} font-sans`}>
      <Component {...pageProps} />
    </main>
  )
}

أخيرًا، أضف متغير CSS إلى إعداد Tailwind CSS:

Tailwind CSS v4

بدءًا من Tailwind v4، لا يلزم أي تكوين افتراضيًا. إذا كنت بحاجة إلى تكوين Tailwind، يمكنك اتباع التوثيق الرسمي لتكوين ملف CSS العام.

@import "tailwindcss";

@theme inline {
  --font-sans: var(--font-inter);
  --font-mono: var(--font-roboto-mono);
}

Tailwind CSS v3

/** @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 لتطبيق الخط على عناصرك.

<p class="font-sans ...">The quick brown fox ...</p>
<p class="font-mono ...">The quick brown fox ...</p>

تطبيق الأنماط

يمكنك تطبيق أنماط الخط بثلاث طرق:

• className
• style
• متغيرات CSS

className

تُرجع className للقراءة فقط للخط المحمل لتمريرها إلى عنصر HTML.

<p className={inter.className}>Hello, Next.js!</p>

style

تُرجع كائن style للقراءة فقط للخط المحمل لتمريرها إلى عنصر HTML، بما في ذلك style.fontFamily للوصول إلى اسم عائلة الخط والخطوط الاحتياطية.

<p style={inter.style}>Hello World</p>

متغيرات CSS

إذا كنت ترغب في تعيين أنماطك في ورقة أنماط خارجية وتحديد خيارات إضافية هناك، استخدم طريقة متغير CSS.

بالإضافة إلى استيراد الخط، استورد أيضًا ملف CSS حيث يتم تعريف متغير CSS وعيّن خيار متغير كائن محمل الخط كما يلي:

import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'

const inter = Inter({
  variable: '--font-inter',
})

import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'

const inter = Inter({
  variable: '--font-inter',
})

لاستخدام الخط، عيّن className للحاوية الأصلية للنص الذي ترغب في تنسيقه إلى قيمة variable لمحمل الخط و className للنص إلى خاصية styles من ملف CSS الخارجي.

<main className={inter.variable}>
  <p className={styles.text}>Hello World</p>
</main>

<main className={inter.variable}>
  <p className={styles.text}>Hello World</p>
</main>

عرّف فئة المحدد text في ملف CSS component.module.css كما يلي:

.text {
  font-family: var(--font-inter);
  font-weight: 200;
  font-style: italic;
}

في المثال أعلاه، يتم تنسيق النص Hello World باستخدام خط Inter والخط الاحتياطي المُنشأ مع font-weight: 200 و font-style: italic.

استخدام ملف تعريفات الخطوط

في كل مرة تستدعي فيها دالة localFont أو خط Google، سيتم استضافة هذا الخط كنسخة واحدة في تطبيقك. لذلك، إذا كنت بحاجة إلى استخدام نفس الخط في أماكن متعددة، يجب تحميله في مكان واحد واستيراد كائن الخط ذي الصلة حيثما تحتاجه. يتم ذلك باستخدام ملف تعريفات الخطوط.

على سبيل المثال، أنشئ ملف fonts.ts في مجلد styles في جذر دليل التطبيق الخاص بك.

ثم، حدد تعريفات الخطوط الخاصة بك كما يلي:

import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'

// تعريف الخطوط المتغيرة
const inter = Inter()
const lora = Lora()
// تعريف وزنين لخط غير متغير
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// تعريف خط محلي مخصص حيث يتم تخزين GreatVibes-Regular.ttf في مجلد styles
const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })

export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }

import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'

// تعريف الخطوط المتغيرة
const inter = Inter()
const lora = Lora()
// تعريف وزنين لخط غير متغير
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// تعريف خط محلي مخصص حيث يتم تخزين GreatVibes-Regular.ttf في مجلد styles
const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })

export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }

يمكنك الآن استخدام هذه التعريفات في الكود الخاص بك كما يلي:

import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'

export default function Page() {
  return (
    <div>
      <p className={inter.className}>Hello world using Inter font</p>
      <p style={lora.style}>Hello world using Lora font</p>
      <p className={sourceCodePro700.className}>
        Hello world using Source_Sans_3 font with weight 700
      </p>
      <p className={greatVibes.className}>My title in Great Vibes font</p>
    </div>
  )
}

import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'

export default function Page() {
  return (
    <div>
      <p className={inter.className}>Hello world using Inter font</p>
      <p style={lora.style}>Hello world using Lora font</p>
      <p className={sourceCodePro700.className}>
        Hello world using Source_Sans_3 font with weight 700
      </p>
      <p className={greatVibes.className}>My title in Great Vibes font</p>
    </div>
  )
}

لتسهيل الوصول إلى تعريفات الخطوط في الكود الخاص بك، يمكنك تعريف مسار اختصار في ملفات tsconfig.json أو jsconfig.json كما يلي:

{
  "compilerOptions": {
    "paths": {
      "@/fonts": ["./styles/fonts"]
    }
  }
}

يمكنك الآن استيراد أي تعريف خط كما يلي:

import { greatVibes, sourceCodePro400 } from '@/fonts'

import { greatVibes, sourceCodePro400 } from '@/fonts'

التحميل المسبق

عند استدعاء دالة خط في صفحة من موقعك، لا يكون الخط متاحًا عالميًا ولا يتم تحميله مسبقًا في جميع المسارات. بدلاً من ذلك، يتم تحميل الخط مسبقًا فقط في المسارات ذات الصلة بناءً على نوع الملف الذي يتم استخدامه فيه:

• إذا كانت صفحة فريدة، يتم تحميلها مسبقًا في المسار الفريد لتلك الصفحة.
• إذا كانت في التطبيق المخصص (custom App)، يتم تحميلها مسبقًا في جميع مسارات الموقع تحت /pages.

تغييرات الإصدار