Trouble loading webfonts from Fontawesome using esbuild

Hi everyone,

Using Elixir Phoenix and esbuild, I installed fontawesome using NPM in the assets folder. I can properly load the SCSS files, but the fonts do not load. I get the following error:

no route found for GET /node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf

Any idea how could I fix this?

PS: My esbuild config is:
config :esbuild, version: "0.14.0", default: [ args: ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*), cd: Path.expand("../assets", __DIR__), env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)} ]

Thanks in advance for your help!

That URL looks pretty suspect to me. You should be able to peek at priv/static/assets and see if the font files are being placed in there.

If they look good, check that you’re importing/including/whatevering them correctly in the JS (or whatever)?

The font files are not placed in priv/static/assets, only the scss is compiled and injected into the app.css file.

Somehow it looks like esbuild (or whatever) does not move the font files in the priv folder.

This gist seems to imply you need to do some lifting yourself maybe, specifically adding loaders for font file types?

See also

esbuild content types css

You can @import other CSS files and reference image and font files with url() and esbuild will bundle everything together. Note that you will have to configure a loader for image and font files, since esbuild doesn’t have any pre-configured. Usually this is either the data URL loader or the external file loader.

esbuild content types external file (needs manual enable!)

Might help?

It would probably help but I don’t find it an elegant solution. It’s more of a hack. I’d like to be in control of all the code I’m writing, especially when it’s deployed into prod :smiley:

Btw I found another solution, also a workaround but IMO less messy. I simply symlinked the fonts into priv/static/fonts and set $fa-font-path: "/fonts"; It worked :slight_smile: