Fonts not working despite npm build success

[Quimbyosis]

I followed the documentation on using Google fonts, even used the GF helper. My font-face looks basically identical to what is in documentation. I’m using Local by Flywheel if that makes any difference. I am using Sass, not Tailwind. Fonts files are directly in the resources/fonts folder, and fonts.css is the recommended spot next to app.scss in the css folder. When running npm run build everything appears to have built correctly, and no npm errors. Despite this, the proper fonts are not showing, and the dev tools console is throwing a 404 error on the fonts. I tried adding an image to the images folder and pulling that in the recommended way - <img src="{{ Vite::asset('resources/images/example.svg') }}"> and this worked as expected. I know my base path must be correct in the vite.config.js because of this. Here are my font-face declarations below.

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 400;
  src: url('@fonts/albert-sans-v3-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Albert Sans';
  font-style: italic;
  font-weight: 400;
  src: url('@fonts/albert-sans-v3-latin-italic.woff2') format('woff2');
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 500;
  src: url('@fonts/albert-sans-v3-latin-500.woff2') format('woff2');
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Albert Sans';
  font-style: italic;
  font-weight: 500;
  src: url('@fonts/albert-sans-v3-latin-500italic.woff2') format('woff2');
}

In app.scss I’m using * { font-family: 'Albert Sans', serif; } to bring it in. (I know this is a sans-serif font - just put serif as backup while testing so it would be blantantly obvious whether it was working or not.)
Am I missing something here? Here’s a screenshot of the dev tools console

[Log1x]

Are the fonts in the Vite manifest? I can’t tell if the font file has a hash or not in your screenshot.

Also, not entirely related to your issue, but GitHub - Log1x/laravel-webfonts: Download, install, and preload Google fonts locally in your Laravel project. has support for Acorn/Vite and can be a nice way to handle future fonts or implement preload markup.

[Quimbyosis]

I’m guessing the mainfest.json in the build folder is what you’re referring to. Yes, they are in there, and they seem to be pointing to the correct place. Sorry for the incomplete screenshot, there is also a hash at the end of it. I’ll take a look at the link you provided and see if that helps.