Can't load fonts from "fonts" folder in Sage10 with Bud 6

[michelecocuccio]

Hello,
I am trying to do something really simple and it’s becoming a very frustrating task.

I am using Sage10 with Bud 6.0.0 (you can see package.json deps below)

  "devDependencies": {
    "@roots/bud": "6.0.0",
    "@roots/bud-eslint": "^6.0.0",
    "@roots/bud-postcss": "^6.0.0",
    "@roots/bud-prettier": "^6.0.0",
    "@roots/bud-stylelint": "^6.0.0",
    "@roots/bud-tailwindcss": "6.0.0",
    "@roots/bud-typescript": "^6.0.0",
    "@roots/eslint-config": "^6.0.0",
    "@roots/sage": "6.0.0",
    "@types/wordpress__blocks": "^11.0.1",
    "@typescript-eslint/eslint-plugin": "^5.28.0",
    "@typescript-eslint/parser": "^5.28.0",
    "@wordpress/blocks": "^11.10.0"
  }

When I try to import the fonts normally, using the @font-face i get errors as the fonts are not found. I saw similar issues which say it was solved with buds 5 but I am using version 6 and the issue persist.
The structure is quite simple. It’s worth nothing I am using postcss.

Bud config below

export default async (bud) => {
  bud.typescript.typecheck.enable();
  bud
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['@scripts/app.ts', '@styles/app'],
      editor: ['@scripts/editor.ts', '@styles/editor'],
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets(['images', 'fonts'])

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch('resources/views/**/*', 'app/**/*')

    /**
     * Target URL to be proxied by the dev server.
     *
     * This should be the URL you use to visit your local development server.
     */
    .proxy('http://localhost:8000')

    /**
     * Development URL to be used in the browser.
     */
    .serve('http://0.0.0.0:3000');
};

Can somebody please point me to the right direction?
Thanks

[alwaysblank]

Read the error message:

Specifically this part:

ERROR ./resources/styles/app.css
Module not found: Error: Can't resolve '../../fonts/Monnt-Bold.ttf' in './resources/styles'

That’s saying that from the directory ./resources/styles it can’t resolve the path ../../fonts/Monnt-Bold.ttf. You’re defining the path in your file as relative to that css file when you should be defining it relative to the entrypoint—which is ./resources/styles/app.css.

[michelecocuccio]

Thanks for the prompt reply, and sorry I know it seems obvious. I have read the message and I tried in many ways. Even if I consider it relative to the entrypoint “app.css” it still doesn’t work.

@font-face {
  font-family: 'mont';
  font-display: swap;
  font-weight: 700;
  src: url('../fonts/Monnt-Bold.woff2') format('woff2'),
    url('../fonts/Monnt-Bold.woff') format('woff'),
    url('../fonts/Monnt-Bold.ttf') format('truetype');
}

it still doesn’t work.

[alwaysblank]

The fonts in your screenshot have only one n in Mont, i.e. Monnt vs Mont

[michelecocuccio]

I am so sorry. Again it was my fault. But it’s good to know that path must be relative to the main file. Thank you a lot.