Laravel项目引入Raleway字体出现404错误的解决咨询

Hey there! Let’s get that Raleway font working in your Laravel project—this 404 issue is super common when you’re starting out with asset management in Laravel.

Why You’re Seeing the 404 #

The core problem here is how Laravel serves static assets. Your server only exposes the public folder to web requests, but your current link points to ../node_modules/... which lives outside the public directory. Browsers can’t access files outside the public root, hence the 404 error.

Solutions to Try #

1. Use Laravel Mix (Recommended for Laravel Projects)

Laravel Mix is built to handle asset management, so this is the cleanest long-term fix:

• Open your webpack.mix.js file in the project root, and add these lines to copy the font assets to your public folder:

// Copy the CSS file
mix.copy('node_modules/raleway-webfont/raleway.min.css', 'public/css/raleway.min.css');
// Copy the actual font files (required for the CSS to load them)
mix.copyDirectory('node_modules/raleway-webfont/fonts', 'public/fonts');

• Run npm run dev (for development) or npm run prod (for production) to compile and copy the assets.
• Now update your link tag in your blade template to use Laravel’s asset helper:

<link href="{{ mix('/css/raleway.min.css') }}" rel="stylesheet">

2. Manually Copy Assets to Public Folder

If you don’t want to use Mix right now, you can manually move the files:

• Copy the entire node_modules/raleway-webfont folder into public/fonts/raleway (create the fonts/raleway directory if it doesn’t exist).
• Update your link tag to point to the public path:

<link href="{{ asset('fonts/raleway/raleway.min.css') }}" rel="stylesheet">

3. Use a CDN (Quickest Fix)

Skip local files entirely by using Google Fonts’ CDN for Raleway:

<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap" rel="stylesheet">

This works instantly and you won’t have to worry about managing local font files.

Any of these methods should resolve the 404 and get your Raleway font loading correctly!

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