关键在于将字体文件放入public/fonts/目录并用绝对路径url('/fonts/xxx.woff2')声明@font-face，再通过Mix或Vite编译注入CSS，最后用mix()引入并清缓存验证。

在Laravel项目中正确引入自定义字体CSS文件，关键在于路径必须匹配public目录的公开可访问结构，否则浏览器会404加载失败。

确认字体文件存放位置

将字体文件（如 .woff2、.ttf）统一放入 【public/fonts/】 目录下。例如：public/fonts/Poppins-Regular.woff2。不要放在 resources/ 下——该目录不会被Web服务器直接访问，编译后也不会自动复制到 public。

这一步漏掉或放错位置，后续所有CSS引用都会失效。

编写字体声明CSS文件

在 resources/css/fonts.css 中写入 @font-face 规则：

立即学习“前端免费学习笔记（深入）”；

@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

注意 url() 中的路径以 【/fonts/】开头，不是 ./fonts/ 或 ../fonts/】 —— 浏览器解析的是绝对URL路径，必须从域名根开始计算。

laravel-specialist

精通 Laravel 10+，遵循现代 PHP 实践的 Laravel 专家。擅长优雅语法、Eloquent ORM、队列系统及企业级特性...

下载

在主CSS中导入并使用

方法一：通过 Laravel Mix 导入
在 resources/css/app.css 顶部添加：
@import './fonts.css';

方法二：直接在 vite.config.js 中配置（若用 Vite）
在 css.preprocessorOptions.css.additionalData 中追加 @import './resources/css/fonts.css';

执行 npm run build 或 npm run dev 编译后，字体声明会注入最终生成的 CSS 文件中。

应用字体样式

第一步：在任意CSS选择器中调用
body { font-family: 'Poppins', sans-serif; }

第二步：确保页面已加载编译后的CSS
检查 HTML 的

中是否引入了 mix('css/app.css')，例如：
<link rel="stylesheet" href="{{ mix('css/app.css') }}">

第三步：清空浏览器字体缓存
Chrome中按 Ctrl+Shift+R 强制重载，避免旧字体规则残留导致不生效。