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

了解更多

将自定义字体添加到 Vite 项目

2024年11月18日

加载自定义字体

要在您的项目中添加自定义字体，请从 Fontsource 安装您想使用的 Google 字体。在本指南中，我们将以 “Bricolage Grotesque” 字体为例。

pnpm add @fontsource-variable/bricolage-grotesque

接下来，在您项目的根目录导入字体，引用 css 路径

main.tsx

import "@fontsource-variable/bricolage-grotesque/index.css"

配置自定义字体

使用 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: "Bricolage Grotesque Variable" },
        body: { value: "Bricolage Grotesque Variable" },
      },
    },
  },
})
信息
您可以通过为 heading、body 或两者指定字体来定制哪些文本元素使用该字体。在这种情况下，我们将正文和标题字体都设置为“Bricolage Grotesque”。

最后，将 system 传入 ChakraProvider

components/ui/provider.tsx

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

这确保了自定义字体在您的整个应用程序中生效。