使用Emotion全局样式时本地字体无法生效的问题

我之前也碰到过一模一样的情况，问题确实出在路径处理上——Create React App对静态资源的加载规则和咱们直接写相对路径的预期不太一样，咱们一步步来修复：

1. 确认本地字体的存放位置 #

Create React App要求字体、图片这类静态资源放在public文件夹下，才能被正确访问到。你需要把字体文件整理成这样的结构：

public/
└── fonts/
    └── DancingScript-Regular.ttf

如果之前把字体放在src文件夹里，webpack会把它当作模块处理，直接用相对路径肯定找不到。

2. 修正@font-face的路径 #

Emotion的Global样式是全局作用的，路径要相对于public目录的根节点，所以把原路径改成绝对路径，同时建议加上字体格式声明（帮助浏览器识别）：

@font-face {
  font-family: "Local Font";
  src: url("/fonts/DancingScript-Regular.ttf") format('truetype');
}

这里的/fonts/对应public下的fonts文件夹，不管你的组件在src哪个子目录，这个路径都能稳定生效。

3. 验证文件名和大小写 #

一定要确保代码里的文件名和实际文件完全匹配，比如DancingScript-Regular.ttf不能写成dancingscript-regular.ttf——本地开发环境可能不区分大小写，但部署到Linux服务器上就会直接失效。

修改后的完整GlobalStyles代码 #

const GlobalStyles = css`
@import url("https://fonts.googleapis.com/css?family=Dancing+Script&display=swap");
@font-face {
  font-family: "Local Font";
  src: url("/fonts/DancingScript-Regular.ttf") format('truetype');
}
* {
  text-align: center;
}
`;

至于谷歌字体为什么能正常工作？因为它用的是完整的绝对URL，浏览器可以直接请求到资源；而本地字体的相对路径会被webpack编译后改变位置，导致找不到文件，换成基于public的绝对路径就解决了这个核心问题。

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