使用高级 Chakra UI 组件更快地构建 💎

了解更多

将自定义字体添加到 Next.js 项目

2024年11月18日

加载自定义字体

Next.js 默认支持 Google 字体。在你的layout.tsx 文件的顶部，从 next/font/google 导入字体

layout.tsx

import { Bricolage_Grotesque } from "next/font/google"

通过定义要包含的变量和子集来配置字体

layout.tsx

const bricolage = Bricolage_Grotesque({
  variable: "--font-bricolage",
  subsets: ["latin"],
})

现在，将字体附加到应用程序中的 <html> 元素。这确保了字体可在 Chakra UI 中使用。

<html className={bricolage.variable} lang="en" suppressHydrationWarning>
  <body>
    <Provider>{children}</Provider>
  </body>
</html>

配置自定义字体

使用 createSystem 方法在 Chakra UI 的主题配置中定义自定义字体

components/ui/provider.tsx

"use client"

import { createSystem, defaultConfig } from "@chakra-ui/react"

const system = createSystem(defaultConfig, {
  theme: {
    tokens: {
      fonts: {
        heading: { value: "var(--font-bricolage)" },
        body: { value: "var(--font-bricolage)" },
      },
    },
  },
})
信息
你可以通过为 heading、body 或两者指定字体来定制哪些文本元素使用该字体。在这种情况下，我们将正文和标题字体都设置为“Bricolage Grotesque”。

最后，将 system 传递给 ChakraProvider

components/ui/provider.tsx

export function Provider(props: ColorModeProviderProps) {
  return (
    <ChakraProvider value={system}>
      <ColorModeProvider {...props} />
    </ChakraProvider>
  )
}

这确保了自定义字体在你的整个应用程序中得到应用。

请记住从你的 global.css 和 page.module.css 文件中删除任何未使用的样式，以防止你的自定义字体被覆盖。