Use custom fonts Rails 7 with jsbundling (esbuild)

Question

How to properly use custom fonts in Rails 7 with jsbundling? I'm trying to use Fontawesome-Free and Font Lora, but I'm getting a loader error.

13:46:30 web.1  | ActionController::RoutingError (No route matches [GET] "/~@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf"):
13:46:30 web.1  |   
13:46:30 web.1  |   
13:46:30 web.1  | ActionController::RoutingError (No route matches [GET] "/files/lora-latin-400-normal.woff"):
13:46:30 web.1  |   
13:46:30 web.1  |   
13:46:30 web.1  | ActionController::RoutingError (No route matches [GET] "/files/cabin-latin-400-normal.woff"):

Gemfile

gem 'jsbundling-rails'
gem 'cssbundling-rails'

package.json

"dependencies": {
    "@fontsource/cabin": "^5.0.18",
    "@fontsource/lora": "^5.0.17",
    "@fortawesome/fontawesome-free": "^6.5.2",
 ///....other depend.........///
  },
  "version": "0.1.0",
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets --loader:.ttf=file --loader:.woff2=file",
    "build:css:compile": "sass --style compressed ./app/assets/stylesheets/application.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "build:css": "yarn build:css:compile",
    "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
  },

appication.scss

@import "@fortawesome/fontawesome-free/css/all";
@import "@fontsource/cabin";
@import "@fontsource/lora"; 

application.js

import "@fortawesome/fontawesome-free/js/all"