خانه / مستندات / Next JS / بهینه سازی فونت ها / فونت های گوگل

فونت های گوگل

می‌توانید هر Google Font را به‌صورت خودکار self-host کنید. فونت‌ها به‌عنوان assetهای static قرار داده می‌شوند و از همان دامنه‌ی deploy شما serve می‌شوند:

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

const geist = Geist({
  subsets: ['latin'],
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={geist.className}>
      <body>{children}</body>
    </html>
  )
}

استفاده از variable fonts برای بهترین پرفورمنس و انعطاف‌پذیری توصیه می‌شود. اگر نمی‌توانید از variable font استفاده کنید، باید weight را مشخص کنید:

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

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}

این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.

ترجمه شده از منبع: https://nextjs.org/docs/app

خانه / مستندات / Next JS / بهینه سازی فونت ها / فونت های گوگل

فونت های گوگل

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

const geist = Geist({
  subsets: ['latin'],
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={geist.className}>
      <body>{children}</body>
    </html>
  )
}

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

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}

ترجمه شده از منبع: https://nextjs.org/docs/app