Chakra v3自定义字体使用方法及本地字体配置问题求助

步骤1：放置字体文件到Public目录 #

将Stolzl字体文件（推荐.woff2/.woff格式）放到项目的public/fonts文件夹下，没有该文件夹则新建。

步骤2：定义@font-face规则 #

在项目全局CSS文件（如globals.css）中添加字体声明：

/* 常规字重 */
@font-face {
  font-family: 'Stolzl';
  src: url('/fonts/Stolzl-Regular.woff2') format('woff2'),
       url('/fonts/Stolzl-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 优化字体加载体验 */
}

/* 如需粗体等其他字重，添加对应声明 */
@font-face {
  font-family: 'Stolzl';
  src: url('/fonts/Stolzl-Bold.woff2') format('woff2'),
       url('/fonts/Stolzl-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

步骤3：引入全局CSS文件 #

确保全局CSS被导入到项目入口文件，比如Next.js的_app.tsx：

import '../styles/globals.css';
import { ChakraProvider } from '@chakra-ui/react';
import { system } from '../path-to-your-theme-config';

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

export default MyApp;

步骤4：确认Chakra主题字体配置 #

你的现有主题配置中fonts部分已正确设置，只需保证字体名称与@font-face中的font-family完全一致：

export const system = createSystem(defaultConfig, {
  theme: {
    tokens: {
      colors: colors,
      textStyles: {
        ...textStyles,
      },
      fonts: {
        heading: { value: `'Stolzl', sans-serif` },
        body: { value: `'Stolzl', sans-serif` },
      },
      breakpoints: {
          sm: '0px',
          md: '500px',
          lg: '768px',
      },
      radii: {
          blocks: '20px',
          fields: '8px',
          menu: '12px',
          personas_buttons: '50%',
      },
    },
  },
  components: {
    Button,
    Modal,
    ClickableIcon,
  },
});

常见问题排查 #

• 检查字体路径：在浏览器中访问http://localhost:3000/fonts/Stolzl-Regular.woff2，确认能正常下载文件。
• 核对字体名称：确保主题配置中的字体名与@font-face里的拼写、引号、大小写完全一致。
• 确认全局CSS导入：检查入口文件是否存在全局CSS的导入语句。

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