NextJS 14中使用Chakra UI加载本地Woff2字体的正确方法

1. 字体文件放置 #

将你的自定义woff/woff2字体文件放到项目根目录的public/fonts文件夹下，Next.js会自动将该目录下的文件作为可公开访问的静态资源。

2. 用Emotion Global注入@font-face规则 #

基于你原本的Chakra UI方案，修正资源路径（public下的资源需从根路径开始引用），创建全局字体样式组件：

import { Global } from '@emotion/react'

const Fonts = () => (
  <Global
    styles={`
      @font-face {
        font-family: 'Heading Font Name';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url('/fonts/custom.woff2') format('woff2'), url('/fonts/custom.woff') format('woff');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      }
      /* 可添加更多字体权重或样式的@font-face规则 */
    `}
  />
)

export default Fonts

3. 在RootLayout中使用Metadata API预加载字体（替代next/head） #

App Router不再支持next/head，需通过Metadata API配置字体预加载，同时引入上面的Fonts组件：

import { Providers } from './providers'
import Fonts from './fonts'

// 配置字体预加载的metadata
export const metadata = {
  links: [
    {
      rel: 'preload',
      href: '/fonts/custom.woff2',
      as: 'font',
      type: 'font/woff2',
      crossOrigin: 'anonymous',
    },
    // 如果需要预加载woff文件，可添加对应条目
  ],
}

const RootLayout = ({ children }) => {
  return (
    <html lang="en">
      <body>
        <Fonts />
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

export default RootLayout

4. 在Chakra UI主题中配置全局字体 #

将自定义字体注册到Chakra UI主题，确保整个应用的组件都能使用该字体：

// app/providers.jsx
import { ChakraProvider, extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  fonts: {
    heading: "'Heading Font Name', sans-serif",
    body: "'Your Body Font Name', sans-serif", // 若有正文字体可配置
  },
})

export function Providers({ children }) {
  return <ChakraProvider theme={theme}>{children}</ChakraProvider>
}

内容的提问来源于stack exchange，提问作者GʀᴜᴍᴘʏCᴀᴛ