Relative path(s) not correct

Hi there,

I am running into this issue again and again but am confident that I am doing everything by the book…

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-latin-regular.eot');
    local('Open Sans Regular'),
    url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'),
    url('../fonts/open-sans-v15-latin-regular.woff') format('woff'),
    url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'),
    url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg');

After building this returns a 404 for the fonts like this:

Obviously there is something wrong with how the relative URL is being resolved but why / where is this happening and how can I fix that?

The other directives for images (like url('../images/icons/slider-arrow-white.svg');) also fail…

Thanks for your insights!

  1. (IMHO) These days only WOFF and optionally WOFF2 formats are needed.
  2. Have you set publicPath in resources/assets/config.json to proper path, is the correct theme folder name used?
  3. There are webpack loaders that may help with loading fonts.

Thanks for getting back!!

  1. Probably went over the top here :slight_smile:
  2. "publicPath": "app/themes/example" --> That was set with the theme installer so it should be OK… (The Sage default in the repo reads "publicPath": "/app/themes/sage")
  3. Since it also affects the image loading I need to address it

Your publicPath is not OK, you need the / at the beginning

Thanks Ben for taking the time to guide me even when the mistakes I make are so darn obvious… :no_mouth: