I am unable to load fonts from /public folders in postcss.

[priosshrsth]

Hi! I am trying to use vite_rails_legacy on one of my existing rails 4 project. I have successfully modified every files and plugins to work with vite and now everything works except the fonts. I have fonts.pcss and icons.pcss which declares the font family. the font files are located inside public directory.

When I run vite dev server, all the fonts request shows 404 and all icons are blank. But, if I make any changes in fonts.pcss or icons.pcss while server is running, the fonts get loaded and everything works fine. I also tried moving the fonts to frontend folder, but it didn't work either.

I don't know, what I'm doing wrong here.

[ElMassimo]

Hi Prios, would you share the relevant content in your font.pcss and icons.pcss file? Please share screenshots of the errors that you are seeing in the browser/Vite/Rails.

Unless you need the font file names to stay unchanged, I'd recommend letting Vite fingerprint them so that they can be cached by the browser forever.

For example, try placing the relevant font files in app/frontend/fonts, and reference them as ~/fonts/ in your .pcss file.

[priosshrsth]

Will try your suggestion right now.

[priosshrsth]

@ElMassimo Thanks its working now. But, I would prefer it they would work from public folder. Since, they are cached and compressed via nginx in production server.

eg. code in fonts.pcss is:

@font-face {
  font-family: 'Social Icons';
  font-display: swap;
  src: url('/fonts/social/social.eot');
  src: url('/fonts/social/social.eot') format('embedded-opentype'), url('/fonts/social/social.woff') format('woff'),
    url('/fonts/social/social.ttf') format('truetype'), url('/fonts/social/social.svg') format('svg');

[ElMassimo]

In production these files will end up in public/vite/assets, so there shouldn't be a difference for nginx.

You may even add a rule in nginx to add cache headers for these assets, as anything inside public/vite/assets is fingerprinted and can be cached forever.

[priosshrsth]

@ElMassimo Thanks. this worked for me.