Font-Face issue - font path incorrect

sage
1

Using Sage 10.1.7 and first time developing with font-face (rather than typekit / adobe fonts).

Something funky going on with my path to fonts.

my app.scss:

@font-face {
  font-family: 'Gilroy-Regular';
  font-style: normal;
  font-weight: normal;
  src: url(~@fonts/Gilroy-Regular.woff) format('woff');
  font-display: swap;
}

Have also tried: src: url('../fonts/Gilroy-Regular.woff') format('woff');

Neither work.

Site compiles fine, but the console shows the fonts aren’t found and the path where its trying to look is incorrect:

http://mysite/app/themes/mytheme/public/fonts/Gilroy-Regular.de88ca.woff

Obviously this isn’t including the wp-content folder so the path somewhere is incorrect. Is this due to the publicPath set in bud.config.mjs?

/**
     * URI of the `public` directory
     */
     .setPublicPath("/app/themes/mytheme/public/");

Not sure what else to try here. The fonts are being compiled in the /public/ folder, but the path the stylesheet is using is incorrect. My jsconfig.json looks fine:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": "resources",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "paths": {
      "@fonts/*": ["fonts/*"],
      "@images/*": ["images/*"],
      "@scripts/*": ["scripts/*"],
      "@styles/*": ["styles/*"]
    },
    "target": "es5"
  },
  "include": ["bud.config.mjs", "resources"],
  "exclude": ["public"]
}

Any ideas would be appreciated.

2

I fixed this with an amend to the bud.config.mjs file:

/**
     * URI of the `public` directory
     */
     .setPublicPath("/wp-content/themes/mytheme/public/");

Assumed that /app in the path was for Bedrock so removed for my project.