Vue doesn't load styles in root

Vue is not blocking the request. The issue is that the font is never actually used, so the browser doesn’t request it.

Browsers only download a font declared with @font-face when some element uses that font-family. If nothing references "FontAwesome", Firefox (and most browsers) will not make a network request for the font files.

In your example you only declare the font:

@font-face { font-family: "FontAwesome"; src: url("/fonts/fa-regular-400.woff2") format("woff2"), url("/fonts/fa-solid-900.woof2") format("woff2"), url("/fonts/fa-brands-400.woff2") format("woff2"); }

but you never apply it anywhere, so the browser has no reason to load it.

Add a rule that actually uses the font, for example:

body { font-family: "FontAwesome"; }

or with an icon element:

.fa { font-family: "FontAwesome"; }

Once the font is referenced by a rendered element, the browser will request the .woff2 files.

Another issue in your snippet

You also have a typo: fa-solid-900.woof2
should be: fa-solid-900.woff2

If that path were used it would fail to load.

About /public in Vue

If you are using Vite or Vue CLI, files inside /public are served from the root path. So:

public/fonts/fa-regular-400.woff2

is correctly referenced as:

/fonts/fa-regular-400.woff2

No additional configuration is required.