Problem with custom font path on production

I have an issue and was hoping someone can tell me what am I doing wrong…

I have set rules for font face in scss file like this…

@font-face {
  font-family: GalanoGrotesque;
  src: url('~@fonts/GalanoGrotesque-Regular.otf') format("opentype");
  font-weight: normal;

this work fine while I am in dev mode and the file path for file is


however if I run yarn build I get this file path and fonts does not load as path is incorect


not sure where does this “app/themes/sage/public” comes from

The build is default Sage10 setup, I only added support for SCSS

"@roots/bud": "6.3.5",
    "@roots/bud-sass": "^6.3.5",
    "@roots/bud-tailwindcss": "6.3.5",
    "@roots/sage": "6.3.5",

Howdy! This should work as expected once you set the correct public path:

I have this set, this is default from Sage10, I haven’t changed anything…

     * URI of the `public` directory

Ah sorry I am an idiot :smile:

     * URI of the `public` directory

And now it works… thanks

1 Like