Roots Sage 9 Fonts Issue (again)

[gordySDM]

Hi,

I have an issue where the fonts that work fine when I use the ‘yarn start’ command but do not load when I have run yarn build or yarn build:production.
I’ve read numerous articles on here and have made adjustments accordingly, however none of the solutions currently on the forum have solved the issue.

Firstly some info about the site:
My urls in the WP options table for site & home are:
http://localhost:88/jc-design

My font face rules are:
@font-face { font-family: "Helvetica Now Display"; src: url("../fonts/HelveticaNowDisplay-Light.eot"); src: local("Helvetica Now Display Light"), local("HelveticaNowDisplay-Light"), url("../fonts/HelveticaNowDisplay-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/HelveticaNowDisplay-Light.woff2") format("woff2"), url("../fonts/HelveticaNowDisplay-Light.woff") format("woff"), url("../fonts/HelveticaNowDisplay-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; }

@font-face {
  font-family: "Helvetica Now Display";
  src: url("../fonts/HelveticaNowDisplay-LightIta.eot");
  src:
    local("Helvetica Now Display Light Ita"),
    local("HelveticaNowDisplay-LightIta"),
    url("../fonts/HelveticaNowDisplay-LightIta.eot?#iefix") format("embedded-opentype"),
    url("../fonts/HelveticaNowDisplay-LightIta.woff2") format("woff2"),
    url("../fonts/HelveticaNowDisplay-LightIta.woff") format("woff"),
    url("../fonts/HelveticaNowDisplay-LightIta.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("../fonts/HelveticaNowDisplay-Regular.eot");
  src:
    local("Helvetica Now Display Regular"),
    local("HelveticaNowDisplay-Regular"),
    url("../fonts/HelveticaNowDisplay-Regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/HelveticaNowDisplay-Regular.woff2") format("woff2"),
    url("../fonts/HelveticaNowDisplay-Regular.woff") format("woff"),
    url("../fonts/HelveticaNowDisplay-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("../fonts/HelveticaNowDisplay-RegIta.eot");
  src:
    local("Helvetica Now Display Reg Ita"),
    local("HelveticaNowDisplay-RegIta"),
    url("../fonts/HelveticaNowDisplay-RegIta.eot?#iefix") format("embedded-opentype"),
    url("../fonts/HelveticaNowDisplay-RegIta.woff2") format("woff2"),
    url("../fonts/HelveticaNowDisplay-RegIta.woff") format("woff"),
    url("../fonts/HelveticaNowDisplay-RegIta.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("../fonts/HelveticaNowDisplay-Medium.eot");
  src:
    local("Helvetica Now Display Medium"),
    local("HelveticaNowDisplay-Medium"),
    url("../fonts/HelveticaNowDisplay-Medium.eot?#iefix") format("embedded-opentype"),
    url("../fonts/HelveticaNowDisplay-Medium.woff2") format("woff2"),
    url("../fonts/HelveticaNowDisplay-Medium.woff") format("woff"),
    url("../fonts/HelveticaNowDisplay-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("../fonts/HelveticaNowDisplay-MedIta.eot");
  src:
    local("Helvetica Now Display Med Ita"),
    local("HelveticaNowDisplay-MedIta"),
    url("../fonts/HelveticaNowDisplay-MedIta.eot?#iefix") format("embedded-opentype"),
    url("../fonts/HelveticaNowDisplay-MedIta.woff2") format("woff2"),
    url("../fonts/HelveticaNowDisplay-MedIta.woff") format("woff"),
    url("../fonts/HelveticaNowDisplay-MedIta.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("../fonts/HelveticaNowDisplay-Bold.eot");
  src:
    local("Helvetica Now Display Bold"),
    local("HelveticaNowDisplay-Bold"),
    url("../fonts/HelveticaNowDisplay-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/HelveticaNowDisplay-Bold.woff2") format("woff2"),
    url("../fonts/HelveticaNowDisplay-Bold.woff") format("woff"),
    url("../fonts/HelveticaNowDisplay-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("../fonts/HelveticaNowDisplay-BoldIta.eot");
  src:
    local("Helvetica Now Display Bold Ita"),
    local("HelveticaNowDisplay-BoldIta"),
    url("../fonts/HelveticaNowDisplay-BoldIta.eot?#iefix") format("embedded-opentype"),
    url("../fonts/HelveticaNowDisplay-BoldIta.woff2") format("woff2"),
    url("../fonts/HelveticaNowDisplay-BoldIta.woff") format("woff"),
    url("../fonts/HelveticaNowDisplay-BoldIta.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("../fonts/HelveticaNowDisplay-ExtraBold.eot");
  src:
    local("Helvetica Now Display ExtBd"),
    local("HelveticaNowDisplay-ExtraBold"),
    url("../fonts/HelveticaNowDisplay-ExtraBold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/HelveticaNowDisplay-ExtraBold.woff2") format("woff2"),
    url("../fonts/HelveticaNowDisplay-ExtraBold.woff") format("woff"),
    url("../fonts/HelveticaNowDisplay-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("../fonts/HelveticaNowDisplay-ExtBdIta.eot");
  src:
    local("Helvetica Now Display ExtBd Ita"),
    local("HelveticaNowDisplay-ExtBdIta"),
    url("../fonts/HelveticaNowDisplay-ExtBdIta.eot?#iefix") format("embedded-opentype"),
    url("../fonts/HelveticaNowDisplay-ExtBdIta.woff2") format("woff2"),
    url("../fonts/HelveticaNowDisplay-ExtBdIta.woff") format("woff"),
    url("../fonts/HelveticaNowDisplay-ExtBdIta.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: "Ionicons";
  src: url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1");
  src:
    url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"),
    url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.1") format("truetype"),
    url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.1") format("woff"),
    url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg");
  font-weight: normal;
  font-style: normal;
}

My config.json paths are:
"publicPath": "/wp-content/themes/my-dev-site",
"devUrl": "http://localhost:88/jc-design",
"proxyUrl": "http://localhost:3000/jc-design",

And the errors for each font file on page load after yarn build:production are:
[correct website url]/dist/fonts/HelveticaNowDisplay-Bold_fc417ab6.woff net::ERR_ABORTED 404 (Not Found)

The ionicons set works Fine.

Can I ask why the font files are hashed in the first place, they would not update often?
Also images are not found either. The public path is correct, the slash has always been present and I’m completely stumped. I thank you kindly in advance for any help!

Thanks