Sage 9 Not compiling fonts

Hey folks,

My fonts folder contents will to compile into the dist folder.

I’ve done my homework, scoured this site, other web pack related forms and am lost for solutions. I have looked at a number of other posts that gave me many ideas but none of them solved my issue.

I have my fonts in named folders within the resources/assets/fonts folder.

I have a roots sage theme in a non bedrock based wordpress(vanialla) install. I have changed the public path config.json in the assets folder to be

"publicPath": "wp-content/theme/theme-name"

I have a variable $font-path: "../fonts"; in my variables file.
In my fonts folder I have font-face calls that look like

@font-face {
  font-family: "Open Sans";
  src: url("#{$font-path}/OpenSans/OpenSans-BoldItalic.woff2") format("woff2"),
    url("#{$font-path}/OpenSans/OpenSans-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}

I have attached a screenshot of my workspace that shows the above + file structure.

To my knowledge all of this should be correct.

However I get an error with the above $font-path.

* ../fonts/Montserrat/Montserrat-Italic.woff in ./node_modules/cache-loader/dist/cjs.js!./node_modules/css-loader?{"sourceMap":true}!./node_modules/postcss-loader/lib?{"config":{"path":"C://devspace//pinnguaq-org//Public//wp-content//themes//pinnguaq-
    v2//resources//assets//build","ctx":{"open":true,"copy":"images/**/*","proxyUrl":"http://localhost:3000","cacheBusting":"[name]_[hash:8]","paths":{"root":"C://devspace//pinnguaq-org//Public//wp-content//themes//pinnguaq-v2","assets":"C://devspace//pin
    nguaq-org//Public//wp-content//themes//pinnguaq-v2//resources//assets","dist":"C://devspace//pinnguaq-org//Public//wp-content//themes//pinnguaq-v2//dist"},"enabled":{"sourceMaps":true,"optimize":false,"cacheBusting":false,"watcher":true},"watch":["app
    /**/*.php","config/**/*.php","resources/views/**/*.php"],"entry":{"main":["./scripts/main.js","./styles/main.scss"],"customizer":["./scripts/customizer.js"]},"publicPath":"wp-content/theme/pinnguaq-v2/dist/","devUrl":"pinnguaq.local","env":{"productio
    n":false,"development":true},"manifest":{}}},"sourceMap":true}!./node_modules/resolve-url-loader?{"sourceMap":true,"absolute":false,"fail":false,"silent":false,"keepQuery":false,"attempts":0,"debug":false,"root":null,"includeRoot":false}!./node_module
    s/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/import-glob!./resources/assets/styles/main.scss

If I update the font-path incorrectly to $font-path: "/fonts"; style-lint does not throw an error and webpack seems compiles properly. Both behave as if the path is valid and that it found the correct resource and the output links to the correct place. However, there is no dist/fonts folder created in start, build or build:production. The outputed compiled code does however make the right file path calls to the correct folders but 404 in the inspector because well there is no fonts folder in the dist folder.

What is super odd is images compile and links to images from the scss work just fine. The images folder is also in the dist folder as well.

I am at a loss on where to go from here. Any ideas would be helpful.

Edit: added more info and fixed formatting issues.

You’re missing the / before /wp-content — does that fix it?

If not, removing the variable and just putting ../fonts in your styles works, correct?

2 Likes

You’re missing the / before /wp-content — does that fix it?

That solves the issue. I cannot believe I missed that.

Thanks

Still true on latest Sage. Was working on hompage, but not on sub pages. Adding the “/” made it work. Thanks