In production react is unable to load fonts correctly

NiccoloCase commented 4 years ago

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.

Senza nome

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.

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

stale[bot] commented 4 years ago

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

GemmaGarcias commented 4 years ago

Do you find the solution @NiccoloCase ? I have same issue

rickyurvina commented 4 years ago

Do you find the solution @NiccoloCase ? Please Help....

binyamindavid commented 3 years ago

Can't find a solution for this. Does any have a fix?

Dharmadurai95 commented 3 years ago

am also face this issue , did you find the way

Darksoulsong commented 3 years ago

Same issue here.

cinaaaa commented 3 years ago

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

halljson commented 3 years ago

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!

wang3620 commented 2 years ago

Same issue here.

minetoo0000 commented 1 year ago

저도 같은 문제가 있었습니다.

"font-family" 속성에 'default', 'inherit', 'initial', 'unset'과 같은 키워드를 사용.

위의 키워드에 홀따옴표를 그냥 붙인 것이 아닙니다. 저의 경우 빌드 과정에서 폰트 이름의 쌍따옴표와 홀따옴표가 제거되었기 때문에 'inherit', 'default'와 같은 폰트 이름이 아닌 inherit, default란 값이 사용되었습니다. 결과적으로 문법 오류가 되므로 어느 폰트도 적용될 수 없었습니다. 다음은 문제가 발생하는 예시입니다.

font-family:"orbit", "default";

"npm start"로 시작하는 경우 문제가 발현되지 않지만 "npm run build"와 같이 빌드를 하면 최적화를 위해 가능한 경우 자동으로 쌍따옴표/홀따옴표가 제거 되기 때문에 잘못된 키워드 사용으로 오류가 발생합니다.

당연하지만 해결방법은 따옴표로 감싸져 있든 아니든 'default'와 같은 css 기본 키워드를 사용하지 않으면 됩니다. 또한 이 정보가 유사한 문제를 해결하기를 바랍니다.

Translated

I had the same problem.

Use keywords such as 'default', 'inherit', 'initial', and 'unset' in the "font-family" property.

I didn't just put a double quotation mark on the keyword above. In my case, values called inherit and default were used instead of font names such as 'inherit' and 'default' because the double quotation marks and the hole quotation marks of the font name were removed during the build process. Neither font could be applied as a result of grammar errors. Here's an example of a problem.

font-family:"orbit", "default";

Starting with "npm start" does not cause problems, but building like "npm run build" automatically removes double quotes/hole quotes if possible for optimization, resulting in errors due to incorrect keyword usage.

Of course, the solution is to avoid using the css default keyword, such as 'default', whether it is enclosed in quotation marks or not. We also hope that this information will solve similar problems.

facebook / create-react-app