Bud.js doesn't copy .woff2/.ttf fonts to public/fonts

bud
1

Hello,

There is a problem with bud.js which copies .woff2/.ttf fonts from FontAwesome at the wrong place.

Here is my config:

bud.js:

app.entry('font-awesome', ['@styles/font-awesome'])

font-awesome.scss:

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";

When running yarn build, assets are builded, but fonts are copied into node_modules/@fortawesome/fontawesome-free/webfonts/ instead of public/fonts/:

$ ls -lh node_modules/@fortawesome/fontawesome-free/webfonts/
total 2,0M
drwxr-xr-x  2 xxx xxx 4,0K 27 févr. 17:52 .
drwxr-xr-x 10 xxx xxx 4,0K  8 févr. 15:49 ..
-rw-r--r--  1 xxx xxx 204K 27 févr. 17:52 fa-brands-400.8bf6cc.ttf
-rw-r--r--  1 xxx xxx 115K 27 févr. 17:52 fa-brands-400.e46575.woff2
-rw-r--r--  1 xxx xxx 204K  8 févr. 15:49 fa-brands-400.ttf
-rw-r--r--  1 xxx xxx 115K  8 févr. 15:49 fa-brands-400.woff2
-rw-r--r--  1 xxx xxx  67K 27 févr. 17:52 fa-regular-400.a937b7.ttf
-rw-r--r--  1 xxx xxx  25K 27 févr. 17:52 fa-regular-400.f386b6.woff2
-rw-r--r--  1 xxx xxx  67K  8 févr. 15:49 fa-regular-400.ttf
-rw-r--r--  1 xxx xxx  25K  8 févr. 15:49 fa-regular-400.woff2
-rw-r--r--  1 xxx xxx 410K 27 févr. 17:52 fa-solid-900.081655.ttf
-rw-r--r--  1 xxx xxx 153K 27 févr. 17:52 fa-solid-900.ce4938.woff2
-rw-r--r--  1 xxx xxx 410K  8 févr. 15:49 fa-solid-900.ttf
-rw-r--r--  1 xxx xxx 153K  8 févr. 15:49 fa-solid-900.woff2

public/css/font-awesome.xxx.css:

[...]
@font-face {
    font-display: block;
    font-family: Font Awesome 6 Free;
    font-style: normal;
    font-weight: 400;
    src: url(/app/themes/xxx/node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.f386b6.woff2) format("woff2"),url(/app/themes/xxxx/node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.a937b7.ttf) format("truetype")
}
[...]

I want (as is normally expected) bud.js to copy .woff2/.ttf fonts into public/fonts/ and set src: url(/app/themes/xxx/public/fonts/fa-regular-400.xxx.woff2) in public/css/font-awesome.xxx.css.

Can you help me?

Thanks!

2

I solved the problem by creating a new rule inside bud.config.js that uses webpack 5 Asset Modules:

  /**
   * Fonts
   */
  app.hooks.on('build.module.rules.oneOf', (rules = []) => {
    rules.push({
      test: /node_modules\/(.*)\.(woff|woff2|eot|ttf|otf)$/,
      type: 'asset/resource',
      generator: {
        filename: 'fonts/[name].[contenthash:6][ext]',
      },
    });

    return rules;
  });

It matches font files (woff, woff2, eot, ttf, otf) and copies them to [public path]/fonts directory.

If anyone has another solution or a better idea, please let me know :slight_smile:

3

This may be interesting: