字體最佳化

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

相關參考

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