تحسين الخطوط

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

🎥 شاهد: تعلم المزيد عن استخدام next/font → YouTube (6 دقائق).

يتضمن next/font استضافة ذاتية تلقائية مدمجة لأي ملف خط. هذا يعني أنه يمكنك تحميل خطوط الويب بشكل مثالي دون أي تغيير في التخطيط، بفضل خاصية CSS size-adjust المستخدمة.

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

خطوط جوجل

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

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

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

pages/_app.js

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

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

pages/_app.js

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

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

app/layout.js

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

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

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

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

pages/_app.js

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} />
    </>
  )
}

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

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

pages/index.js

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

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

export default function Home() {
  return (
    <div className={inter.className}>
      <p>مرحبًا بالعالم</p>
    </div>
  )
}

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

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

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

pages/_app.js

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

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

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

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

النهج الأول هو إنشاء دالة مساعدة تصدر خطًا، تستورده، وتطبق 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 المفضل لديك:

app/global.css

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

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

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

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

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

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

pages/_app.js

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

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

مع Tailwind CSS

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

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

pages/_app.js

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

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

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

أخيرًا، أضف متغير CSS إلى إعدادات 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 لتطبيق الخط على عناصرك.

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

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

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

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

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

استدعاء دالة محمل الخط في ملف مشترك واحد
تصديره كمتغير ثابت
استيراد المتغير في كل ملف ترغب في استخدام هذا الخط فيه

On this page