Laravel 8（mix）导入自定义字体后在scss中使用无效如何解决？

修复步骤 #

1. 修正文件名匹配错误 #

你resources/fonts目录下的字体文件名为opensans.ttf，但SCSS代码中调用的是OpenSans-Regular.ttf，文件名不一致是直接导致加载失败的首要原因，先将两者统一，比如将字体文件重命名为OpenSans-Regular.ttf。

2. 配置Laravel Mix资源复制规则 #

resources目录下的文件默认无法被web直接访问，需要在项目根目录的webpack.mix.js中添加配置，让编译时自动将字体文件复制到public目录：

mix.copyDirectory('resources/fonts', 'public/fonts');

3. 修正SCSS字体配置 #

调整app.scss中的路径和格式声明，ttf格式对应的标准format值为truetype，且编译后的app.css会输出到public/css目录，相对路径需要指向同级的fonts目录：

@font-face {
    src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
    font-family: "OpenSans";
    font-weight: normal;
    font-style: normal;
}

需要使用字体的位置指定对应字体族即可：

body {
    font-family: "OpenSans", sans-serif;
}

4. 重新编译静态资源 #

执行编译命令生成新的静态文件：

npm run dev

编译完成后检查public目录下是否生成了包含对应字体文件的fonts文件夹，刷新页面即可生效。

异常排查 #

如果仍不生效，打开浏览器开发者工具的「网络」面板，筛选字体资源查看请求状态：

• 若返回404：核对public目录下字体文件的实际路径和CSS中声明的路径是否一致，也可以直接改用绝对路径url("/fonts/OpenSans-Regular.ttf")避免相对路径计算错误
• 若返回跨域错误：给web服务器配置静态资源跨域响应头即可

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