如何在React项目中添加自定义字体文件并替换默认字体？

1. 存放字体文件 #

• 在项目的public目录下创建fonts文件夹，将你的字体文件（如.woff2、.woff、.ttf等格式）放入其中。比如你有MyCustomFont-Regular.woff2、MyCustomFont-Bold.woff2这类文件。

2. 定义字体规则 #

打开项目的全局样式文件（通常是src/index.css），添加@font-face声明来注册你的自定义字体：

/* 注册常规字重的自定义字体 */
@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/MyCustomFont-Regular.woff2') format('woff2'),
       url('/fonts/MyCustomFont-Regular.woff') format('woff'),
       url('/fonts/MyCustomFont-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 注册粗体字重的自定义字体（如果有） */
@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/MyCustomFont-Bold.woff2') format('woff2'),
       url('/fonts/MyCustomFont-Bold.woff') format('woff'),
       url('/fonts/MyCustomFont-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

提示：提供多种字体格式能更好兼容不同浏览器，woff2是体积最小、加载最快的优先格式。如果字体文件放在src/assets/fonts目录下，路径需要调整为相对路径（比如../assets/fonts/xxx，具体根据样式文件位置而定）。

3. 设置全局默认字体 #

在同一全局样式文件中，给页面根元素（比如body）设置默认字体：

body {
  margin: 0;
  font-family: 'MyCustomFont', sans-serif;
  /* sans-serif是 fallback 字体，确保自定义字体加载失败时页面仍有可读字体 */
}

如果需要给特定组件单独设置字体，直接在组件样式中指定即可：

.my-special-component {
  font-family: 'MyCustomFont', serif;
}

4. 验证效果 #

启动本地开发服务（npm start或yarn start），查看页面字体是否已替换。如果未生效，检查以下几点：

• 字体文件路径是否正确，浏览器控制台是否有资源加载报错
• font-family名称是否和@font-face中定义的完全一致
• 字体文件本身是否损坏，或浏览器不支持该格式

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