[Question] What's the best way to bundle fonts with CSS?

[ayushmanchhabra]

Here's a minimal repro illustrating what I've tried to do:
https://github.com/tharatau/idea-maze/tree/main/repro/esbuild/2790

When I run npm start, I get this error:

npm start

> start
> node build.mjs

✘ [ERROR] Cannot import "icomoon.eot" into a CSS file

    src.css:1:8:
      1 │ @import "./icomoon.eot";
        ╵         ~~~~~~~~~~~~~~~

/home/ayushmxn/tharatau/idea-maze/repro/esbuild/2787/node_modules/esbuild/lib/main.js:1596
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 1 error:
src.css:1:8: ERROR: Cannot import "icomoon.eot" into a CSS file
    at failureErrorWithLog (/home/ayushmxn/tharatau/idea-maze/repro/esbuild/2787/node_modules/esbuild/lib/main.js:1596:15)
    at /home/ayushmxn/tharatau/idea-maze/repro/esbuild/2787/node_modules/esbuild/lib/main.js:1052:28
    at /home/ayushmxn/tharatau/idea-maze/repro/esbuild/2787/node_modules/esbuild/lib/main.js:997:67
    at buildResponseToResult (/home/ayushmxn/tharatau/idea-maze/repro/esbuild/2787/node_modules/esbuild/lib/main.js:1050:7)
    at /home/ayushmxn/tharatau/idea-maze/repro/esbuild/2787/node_modules/esbuild/lib/main.js:1162:14
    at responseCallbacks.<computed> (/home/ayushmxn/tharatau/idea-maze/repro/esbuild/2787/node_modules/esbuild/lib/main.js:697:9)
    at handleIncomingPacket (/home/ayushmxn/tharatau/idea-maze/repro/esbuild/2787/node_modules/esbuild/lib/main.js:752:9)
    at Socket.readFromStdout (/home/ayushmxn/tharatau/idea-maze/repro/esbuild/2787/node_modules/esbuild/lib/main.js:673:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 8,
        file: 'src.css',
        length: 15,
        line: 1,
        lineText: '@import "./icomoon.eot";',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Cannot import "icomoon.eot" into a CSS file'
    }
  ],
  warnings: []
}

Node.js v18.12.1

[hyrious]

The best way is using @font-face and url(./icomoon.eot) to link fonts into your css file. See an example in katex:
https://unpkg.com/katex@0.16.4/dist/katex.css

[ayushmanchhabra]

Reason I asked is because I used a similar approach using an earlier minor version of esbuild and I remember it working for me:

./out/index.css
./out/icomoon-shj2hdbkqibevd.eot

With a similar folder structure^

[evanw]

There are two ways to reference another file in CSS: @import and url(). You are trying to use @import but you should have used url(). You can only use @import with other CSS files while you can use url() with many asset types.

[ayushmanchhabra]

Gotcha! Thanks @hyrious @evanw