Trouble loading webfonts from Fontawesome using esbuild

Phoenix Forum Questions / Help
1

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!

2

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)?

3

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.

4

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?

5

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: