Next.js+Chakra UI项目自定义字体无法正常显示求助

1. 先确认字体导入是否正确 #

Next.js里导入Google字体有两种常用方式，先检查你的导入步骤：

• 全局Link标签导入：在_app.js/_app.tsx中添加字体链接，注意要加预连接提升加载效率：

  import Head from 'next/head'
  
  function MyApp({ Component, pageProps }) {
    return (
      <>
        <Head>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Notable&display=swap" rel="stylesheet" />
        </Head>
        <Component {...pageProps} />
      </>
    )
  }
  
  export default MyApp
  

  要确保字体权重覆盖你实际用到的范围，比如Inter如果用到粗体，就要包含对应权重。

• @next/font自动优化（推荐）：Next.js 13+的字体优化方案，能避免加载异常：

  import { Inter, Notable } from '@next/font/google'
  
  const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
  const notable = Notable({ subsets: ['latin'], variable: '--font-notable' })
  

  然后在App根元素添加变量类名：

  function MyApp({ Component, pageProps }) {
    return (
      <div className={`${inter.variable} ${notable.variable}`}>
        <Component {...pageProps} />
      </div>
    )
  }
  

2. 验证Chakra UI主题配置 #

确保主题里的字体族名称和导入的完全匹配，大小写、引号都不能错：

// theme.js
import { extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  fonts: {
    heading: `'Notable', sans-serif`,
    body: `'Inter', sans-serif`
  }
})

export default theme

一定要加后备字体（比如sans-serif），防止字体加载失败时页面完全乱掉。

3. 检查浏览器端的加载状态 #

打开浏览器开发者工具（F12），切换到Network标签筛选Fonts，刷新页面看：

• 如果字体请求返回404，说明导入的URL或字体名称写错了
• 如果字体加载成功但没生效，去Elements标签看Heading元素的font-family，是否被其他样式覆盖

4. 排查样式优先级冲突 #

如果主题配置没生效，临时给Heading加内联样式测试：

<Heading fontFamily="Notable">测试标题</Heading>

如果内联样式生效，说明主题样式被全局CSS或其他组件的高优先级样式覆盖了，需要排查自定义样式规则。

5. 注意字体本身的特性 #

Notable是一款装饰性无衬线字体，只有400字重，如果你的Heading组件设置了fontWeight: bold之类的非400值，会自动 fallback 到后备字体，这是字体本身的限制，不是配置问题。

内容的提问来源于stack exchange，提问作者David Henson