字型最佳化

next/font 會自動最佳化您的字型（包括自訂字型），並移除外部網路請求，以提升隱私和效能。

🎥 影片：進一步了解如何使用 next/font → YouTube (6 分鐘)。

next/font 內建自動自託管功能，適用於任何字體檔案。這表示您可以最佳化網頁字體載入，且不會造成版面配置偏移，這要歸功於底層使用的 CSS size-adjust 屬性。

這個新的字體系統也讓您可以方便地使用所有 Google Fonts，同時兼顧效能和隱私。CSS 和字體檔案會在建置時下載，並與其他靜態資源一起自託管。瀏覽器不會向 Google 發送任何請求。

Google Fonts

自動自託管任何 Google Font。字體會包含在部署中，並從與您的部署相同的網域提供服務。瀏覽器不會向 Google 發送任何請求。

首先，從 next/font/google 以函數形式導入您要使用的字體。為了獲得最佳效能和彈性，我們建議使用可變字體。

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

如果您無法使用可變字體，您將需要指定粗細

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。

指定子集。這可以減少字體檔案的大小並提高效能。您需要定義要預載哪些子集。如果preload 為 true 時未指定任何子集，將會產生警告。

您可以透過將其添加到函數呼叫中來完成此操作

app/layout.tsx

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

查看字體 API 參考以了解更多資訊。

使用多種字體

您可以在應用程式中導入和使用多種字體。您可以採用兩種方法。

第一種方法是建立一個工具函數，用於匯出字體、導入字體，並在需要的地方應用其 className。這確保字體僅在渲染時才會預載。

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 變數並將其與您偏好的 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。我們建議使用可變字體以獲得最佳效能和彈性。

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 變數與 Tailwind CSS 搭配使用。

在下面的例子中，我們使用來自 next/font/google 的 Inter 字體（您可以使用任何來自 Google 或本地字體的字體）。使用 variable 選項載入您的字體以定義您的 CSS 變數名稱並將其指派給 inter。然後，使用 inter.variable 將 CSS 變數新增到您的 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 變數新增到您的 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 工具類別將字體套用至您的元素。

預載

當在您網站的某個頁面上呼叫字體函式時，它並不會在所有路由上全域可用和預載。相反地，字體只會根據使用它的檔案類型在相關路由上預載。

如果是單一頁面，則會在該頁面的單一路由上預載。
如果是佈局 (Layout)，它會在所有被該佈局包裹的路由上預先載入。
如果是根佈局 (Root Layout)，它會在所有路由上預先載入。

重複使用字體

每次呼叫 localFont 或 Google 字體函式時，該字體都會在您的應用程式中作為一個實例託管。因此，如果您在多個檔案中載入相同的字體函式，則會託管同一個字體的多個實例。在這種情況下，建議執行以下操作：

在一個共用檔案中呼叫字體載入器函式
將其匯出為常數
在您要使用此字體的每個檔案中匯入該常數