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

http://localhost:3000/fonts/GalanoGrotesque-Regular.otf

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

https://everstox.test/app/themes/sage/public/fonts/GalanoGrotesque-Regular.cbd895.otf

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
     */
    .setPublicPath("/app/themes/sage/public/");

Ah sorry I am an idiot :smile:

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

And now it works… thanks

1 Like