Laravel 9网站部署到Heroku后自定义字体无法加载的解决方法

问题描述 #

我把自定义字体文件Satoshi-Variable.ttf放在public/fonts目录下，本地开发时字体加载正常，但部署到Heroku后控制台出现404错误，系统尝试从build/assets/fonts/路径访问该字体文件。

相关代码片段：

app.css #

@font-face {
    src: url(/fonts/Satoshi-Variable.ttf);
    font-family: satoshi;
}

vite.config.js #

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
});

app.js #

import './bootstrap';
import '../css/app.css';

解决方案 #

提供两种可行方案，按需选择：

方案1：保留public/fonts目录下的字体 #

1. 检查部署配置：确保Heroku部署时public/fonts目录被正确上传，查看项目.gitignore文件，若有排除public/fonts的规则，将其移除。
2. 修正CSS引用：在@font-face中明确字体格式，保留绝对路径避免Vite不必要的路径重写：

@font-face {
    src: url('/fonts/Satoshi-Variable.ttf') format('truetype');
    font-family: satoshi;
}

本地开发时Vite代理会自动映射/fonts到public/fonts，线上环境只要public/fonts目录存在，就能正常访问字体。

方案2：将字体纳入Vite构建流程（推荐） #

让Vite自动管理字体资源，彻底避免路径匹配问题：

1. 迁移字体文件：把Satoshi-Variable.ttf从public/fonts移动到resources/fonts目录（无此目录则新建）。
2. 修改CSS相对路径：调整@font-face的引用路径为相对于app.css的位置：

@font-face {
    src: url('../fonts/Satoshi-Variable.ttf') format('truetype');
    font-family: satoshi;
}

3. 重新构建部署：部署时Vite会自动将字体打包到build/assets/fonts目录，同时自动修正CSS中的访问路径，不会出现404。

问题原因 #

本地开发时，Vite开发服务器会代理public目录下的所有资源，所以/fonts/路径能直接访问到public/fonts里的文件。但部署到Heroku后，Vite构建过程会解析CSS中的资源引用，若使用绝对路径且未正确配置，会被重写为相对于构建后assets目录的路径；同时如果public/fonts目录未被正确部署，就会触发404错误。

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