Chakra UI无法设置Fontsource自定义字体问题求助

核心问题：字体字重不匹配 #

Girassol 字体仅提供 400（常规） 这一种字重，你在主题中设置的 fontWeight: "800" 不存在，浏览器无法找到对应字重的字体文件，因此自动 fallback 到后备的 sans-serif，导致自定义字体不生效。

修复步骤 #

1. 修正字体字重
   将 theme.ts 中 logo 变体的 fontWeight 改为 400，匹配字体本身支持的字重。

2. （推荐）在 Chakra 主题中注册自定义字体
   虽然直接写字体名也能生效，但在主题的 fonts 字段中注册字体，能让 Chakra 更规范地识别和管理字体，避免潜在的引用问题。

修改后的 theme.ts 代码：

import { extendTheme } from "@chakra-ui/react";

const customTheme = extendTheme({
  // 注册自定义字体
  fonts: {
    girassol: "Girassol, sans-serif",
  },
  components: {
    Text: {
      variants: {
        logo: {
          bgGradient: "linear-gradient(45deg, #20b2aa, #cc0000)",
          textFillColor: "transparent",
          bgClip: "text",
          fontFamily: "girassol", // 使用注册的字体别名
          fontWeight: "400", // 改为字体支持的字重
          as: "span"
        },
      },
    },
  },
});

export default customTheme;

3. 确认根组件正确应用主题
   确保你的根组件（如 Next.js 的 _app.tsx）已通过 ChakraProvider 传入自定义主题，这是主题生效的前提：

import { ChakraProvider } from '@chakra-ui/react';
import customTheme from '../path/to/theme';

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={customTheme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

验证 #

修改后重新运行项目，字体应该会正常显示 Girassol 的样式。你可以通过浏览器开发者工具的「字体」面板，确认当前文本使用的字体是否为 Girassol。

内容的提问来源于stack exchange，提问作者Carolina Karoullas