Roots Discourse

404 when loading font

Hi,

I added my fonts inside directory:

Then added the font faces like this in _variables.scss file

but get a 404 error on my site loading the font

The yarn build:production command does not rises any error.

Any idea ?

The URLs for fonts in your stylesheet needed to be relative, not absolute.

Thanks for your answer, but then what should i set it to ? Because no error compiling locally, and when i change it to relative using …/ instead of / an error raises from webpack saying it cannot find font.

This relative module was not found:

* ../fonts/OpenSans/OpenSans-Medium.ttf in ./node_modules/cache-loader/dist/cjs.js!./node_modules/css-loader?{"sourceMap":true}!./node_modules/postcss-loader/lib?{"config":{"path":"/Applications/MAMP/htdocs/id_wp_test/wp-content/themes/idweblogs-portal/resources/assets/build","ctx":{"open":true,"copy":"images/**/*","proxyUrl":"http://localhost:3000/","cacheBusting":"[name]_[hash:8]","paths":{"root":"/Applications/MAMP/htdocs/id_wp_test/wp-content/themes/idweblogs-portal","assets":"/Applications/MAMP/htdocs/id_wp_test/wp-content/themes/idweblogs-portal/resources/assets","dist":"/Applications/MAMP/htdocs/id_wp_test/wp-content/themes/idweblogs-portal/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/themes/idweblogs-portal/dist/","devUrl":"http://localhost/id_wp_test","env":{"production":false,"development":true},"manifest":{}}},"sourceMap":true}!./node_modules/resolve-url-loader?{"sourceMap":true}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true,"sourceComments":true}!./node_modules/import-glob!./resources/assets/styles/main.scss

Because you are storing your fonts in subdirectories, maybe you have this issue.

Try moving your fonts directly to the fonts folder instead of a folder for each font.