No loader is configured for ".otf" files

[Jules010209]

Hello, when I try to build the package, I get this error because of a font file, but I don't know how to import it. Can anyone help me import it please?

Error:

i  info      Welcome to Mach, v1.1.0-rc4
i  info      Loaded config file C:\Users\Jules\Documents\vscode\pesim-efb\mach.config.cjs

►  start     Building 1 instruments

[EFB] » ×  error     Build failed — 1 error

[EFB] » No loader is configured for ".otf" files: src/assets/SF-Pro-Display-Regular.otf ()
[EFB] » →  at src/App.css:3:11

×  error     All 1 instruments failed to build

[MikeRomaa]

Are you sure you need to be importing the .otf file directly inside of your JS/TS code? There's usually not much you can do with the raw file data anyway. What we and many others do is throw the font file into /html_ui/Fonts/ and just import it using the CSS @font-face directive.

If, however, you do really need to have the font file imported directly in JS/TS, may I know how you are using it? esbuild supports many content types that you may be able to use depending on the use case.

[Jules010209]

I use it as I would import a normal file. The font file is in the react asset folder and I import it directly into my css.

[MikeRomaa]

I see. The reason this doesn't work by default is that esbuild will emit a single JS bundle in the end, and the handling of any non-JS files has to be explicitly defined since they could either be copied or inlined into the bundled code.

I would still recommend putting it in /html_ui/Fonts since there is no need to keep it in the source code directory. From html_ui, it can be imported by using /Fonts as an absolute path. As an example example, this is the font import for our project:

@font-face {
    font-family: 'A22X Mono';
    font-weight: 400 900;
    src: url('/Fonts/A22XMono-VF.ttf') format('truetype');
    font-feature-settings: 'calt' on;
}

However, I will still make a change to the source code to do two things:

1. allow people to pass arbitrary esbuild arguments in the mach config; and
2. specify the default file loader for some common file types as file, which will copy them to the output directory.