Asset in main.scss not loading correctly

Adding a font like the following:

@font-face {
  font-family: 'TheMixPlainBold';
  src: url('../../fonts/themixplain-bold-webfont.eot');
  src:
    url('../../fonts/themixplain-bold-webfont.woff') format('woff'),
    url('../../fonts/themixplain-bold-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Results in build with //dist. The browser now tries to load the font as ‘https://dist//fonts/themix-plain-webfont.woff

@font-face {
  font-family: 'TheMixPlain';
  src: url(//dist//fonts/themix-plain-webfont.eot);
  src: url(//dist//fonts/themix-plain-webfont.woff) format("woff"), url(//dist//fonts/themix-plain-webfont.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Any clues as to why this is happening?

Your font file should be like

@font-face {
  font-family: 'TheMixPlainBold';
  src: url('../fonts/themixplain-bold-webfont.eot');
  src:
    url('../fonts/themixplain-bold-webfont.woff') format('woff'),
    url('../fonts/themixplain-bold-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

In your /resources/assets/config.json file you have to set the “publicPath” value properly based on your project root structure.