In production react is unable to load fonts correctly

I am aware of the existence of other issues similar to mine, but I just can’t solve it. My problem is that, after generating the application build, react is perfectly able to load the images (looking for them at this path: /static/media), but is not able to load the fonts correctly. In fact, these are found in the same folder as the images (in production, of course), but the application looks for them in the directory /static/css/static/media, so it is unable to find them.

Environment

OS: Windows 10 
Node: 12.16.2
Yarn: 1.9.4 
npm: 6.14.4 
Broswer: any

This is my package.js:

{
  "name": "web",
  "homepage": "./",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/react-components": "^3.1.3",
    "@apollo/react-hooks": "^3.1.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.27",
    "@fortawesome/free-solid-svg-icons": "^5.12.1",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "apollo": "^2.25.0",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.6.8",
    "apollo-link": "^1.2.13",
    "apollo-link-http": "^1.5.16",
    "classnames": "^2.2.6",
    "config": "1.0.0",
    "graphql-tag": "^2.10.3",
    "lodash": "^4.17.15",
    "node-sass": "^4.12.0",
    "react": "^16.9.0",
    "react-addons-css-transition-group": "^15.6.2",
    "react-dom": "^16.9.0",
    "react-router-dom": "^5.1.2",
    "react-scripts-ts": "4.0.8",
    "react-share": "^4.1.0",
    "react-slick": "^0.25.2",
    "react-spinners": "^0.8.1",
    "react-visibility-sensor": "^5.1.1",
    "reactjs-popup": "^1.5.0",
    "validator": "^12.2.0"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject",
    "gen": "graphql-codegen --config codegen.yml"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^1.13.1",
    "@graphql-codegen/introspection": "^1.13.1",
    "@graphql-codegen/typescript": "^1.13.1",
    "@graphql-codegen/typescript-operations": "^1.13.1",
    "@graphql-codegen/typescript-react-apollo": "^1.13.1",
    "@types/classnames": "^2.2.10",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.7.8",
    "@types/react": "^16.9.3",
    "@types/react-addons-css-transition-group": "^15.0.5",
    "@types/react-dom": "^16.9.1",
    "@types/react-router-dom": "^5.1.0",
    "@types/react-slick": "^0.23.4",
    "@types/react-visibility-sensor": "^5.0.1",
    "@types/validator": "^12.0.1",
    "typed-scss-modules": "^1.2.0",
    "typescript": "^3.6.3"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Steps to reproduce

The file (index.scss) in which the fonts are imported is placed inside a folder (called “styles”) that is in turn in the “src” folder.

index.scss:

@font-face {
  font-family: 'Rawson';
  src: url("../assets/fonts/RawsonPro-Medium.otf") format('opentype');
  font-weight: 500;
}
@font-face {
  font-family: 'Rawson';
  src: url("../assets/fonts/Rawson-Bold.otf") format('opentype');
  font-weight: bold;
}
@font-face {
  font-family: 'Rawson';
  src:  url("../assets/fonts/Rawson-Regular.otf") format('opentype');
}

The fonts, as can be guessed from the code shown above, are in a sub-folder (called “assets”) of the “src” folder. I want to clarify that in development mode the fonts are loaded correctly, the problem arises only when I create the build and serve it on my server. As for the server, I use a server developed with the NestJS framework; this is not relevant, because, in fact, I also tried with a simple server provided on the official web page of create-react-app, and the problem occurs the same.

server:

const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(9000);

As I have already written I am aware of the existence of other similar problems (like this old one: #1480). However, these problems seem to have been solved by a new version of react-scripts. Maybe the problem in my case is given by the use of typescript? Or maybe I’m just missing something about how relative paths work? I am also aware that to fix the problem it would be enough to eject my app and configure myself webpack, but now I would like to try to find an alternative solution to continue using create-react-app. I thank you in advance for your patience and I apologize if I am a beginner in the deployment and I may have missed something.

[cinaaaa]

Same issue !!! fonts are loads and works normal in dev stage but not in production and build version

[halljson]

I’m sure there are a lot of different reasons this can happen, but my reason was pretty silly.

I tried uploading my font to https://transfonter.org/ and it turned out that it was corrupted - despite it working fine on localhost. I was using a free font and needed to pay for the pro version. The paid-version files weren’t corrupted on this site and loaded just fine in production.

Another thing to be aware of if you hit this is that git might ignore your changes when you overwrite the old files. Either give them a new name or add this to .gitattributes:

*.ttf     -text diff
*.eot     -text diff
*.woff    -text diff
*.woff2   -text diff

hope this helps someone!