Vite dev server assets from stylesheet 404

[robdekort]

Hi folks,

I'm trying to switch to Vite but running into an issue only with the dev server. I have the following in my CSS:

src: url('/fonts/BreveDisplay-Regular.woff2') format('woff2'),

I use Valet to serve my sites. Whenever I run npm run dev and I visit my sites local url (site.test) the font files 404 and don't render as they are being served from http://127.0.0.1:3000/fonts/BreveDisplay-Regular.woff2 . How can I make sure Vite uses the actual URL?

Hopefully someone knows. I can't seem to figure it out.

[vannut]

The vite dev-server runs a bit different then Valet with nginx and DNSMasq.

Where valet serves from your /public/ diretory; the dev-server runs from the project root. So referencing the full path starting from the root dir of your project should work.

src: url('/pulic/fonts/BreveDisplay-Regular.woff2') format('woff2'),

The built-command will automatically copy the assets (and reference to it) to your built-directory.

[robdekort]

Wondefull. Thank you.

[eric-hansen]

I know this is from last year, but I would like to suggest an alternative...

I was able to accomplish this by doing the following, and not exposing public in the url as it can be a security risk.

I'm using the Bolt font but replace accordingly.

Add this to resources/css/app.css:

@font-face {
  font-family: 'bolt';
  src: url('/resources/fonts/bolt.tff') format('truetype'),
    url('/resources/fonts/bolt.woff') format('woff'),
    url('/resources/fonts/bolt.woff2') format('woff2');
}

Add this to your tailwind.config.js:

export default {
  theme: {
    extend: {
      fontFamily:{
        'bolt': ['bolt', 'sans-serif']
      }
   }
  }
}

Put the font(s) you want to use in your ./resources/fonts directory (if you want a different folder then update the snippets accordingly).

[robdekort]

This is indeed the way to go!