字體最佳化

Next.js 協助您於 next build 的時候，藉由設定行內字體 CSS 來最佳化網頁字體載入。這樣的優化免除抓取額外字體聲明檔案的網路作業，也有助於提升 首次內容繪製 (FCP) 和 最大內容繪製 (LCP) 。如下範例，可以看到 Next.js 所做的變更：

// Before
<link
  href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
  rel="stylesheet"
/>

// After
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<style data-href="https://fonts.googleapis.com/css2?family=Inter&display=optional">
  @font-face{font-family:'Inter';font-style:normal...
</style>

用法

若要新增網頁字體至您的 Next.js 應用程式，則可以增加字體於 自訂文件 (Custom Document)。

// pages/_document.js

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
          rel="stylesheet"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

新增字體於 _document 中，比在單一頁面新增好。當您僅是於單一頁面的 next/head 新增字體，在瀏覽客戶端網頁或是 streaming 伺服器渲染 的頁面時，Next.js 所提供的字體優化功能將無法發揮作用。

目前 Next.js 支援優化 Google Fonts 和 Typekit 字體，也預計很快就能支援其他字體供應商，我們目前也在規劃，未來能控制 載入策略 和 font-display 的設定。您可參考更多資訊於 Google Font Display。

注意： 字體載入最佳化目前並不支援未開源的字體。

停止最佳化

若您不希望 Next.js 執行載入字體最佳化，您可以參考如下設定。

// next.config.js

module.exports = {
  optimizeFonts: false,
}

相關參考

我們推薦您下列章節，以獲取更多相關資訊：

自訂文件 (Custom Document) 學習如何添加您的 html 和 body 標籤(tags)。