question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Fonts linked are linked to wrong path in production

See original GitHub issue

Description

Links to fonts imported from CSS have wrong link in production CSS file.

Expected behavior

Imported fonts in CSS load correctly in production and are loaded from static/media Tell us what you think should happen.

Actual behavior

Font files from CSS are linked to ./static/css/static/media and therefore 404. line in generated main.css @font-face{font-family:Mana;src:url(./static/media/mana.9e4b11ee.eot);

http://localhost:8080/static/css/static/media/mana.b561ddbf.woff Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/static/css/static/media/mana.059227ff.ttf Failed to load resource: the server responded with a status of 404 (Not Found)

Environment

react-scripts@0.8.5 v7.5.0 4.1.2

macOS El Capitan Any Browser

Link to repo with error: https://github.com/Booli/simmer

package.json

  "name": "simmer",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.8.5",
    "sw-precache": "^4.3.0"
  },
  "dependencies": {
    "mana-font": "^1.2.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "rebass": "^0.4.0-beta.9",
    "reflexbox": "^2.2.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "homepage": "./"
}

Or I am misunderstanding how to import the fonts

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
gaearoncommented, Feb 7, 2017

Perhaps this will be solved by #1489.

0reactions
Timercommented, Feb 11, 2017

Hi there! react-scripts v0.9.0 was just released which adds support for building for relative paths. You may read how to do so here.

Please test it and don’t hesitate to reach out if this doesn’t solve your specific use case!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Rendered fonts have wrong url - Laravel Mix - Stack Overflow
My issue is that a fonts folder created at the root of the directory and not in dist/assets/fonts/ where I need it to...
Read more >
Invoking .ttf file from wrong path / page not found errors - Drupal
What I did noticed, is that something is calling font with a wrong path (almost). Font path is correct, but it is appended...
Read more >
Resolve missing fonts in desktop applications - Adobe Support
You need to be connected to the internet and logged in to Creative Cloud desktop to activate missing fonts through Creative Cloud.
Read more >
Font Management in macOS
Font Management in macOS. ... Are you a good font, or a bad font? ... In the window that opens, click the Manage...
Read more >
Best practices for loading fonts in Vue - LogRocket Blog
Solution is to put fonts folder also into assets/ folder, and webpack build will work and font files ase copied into “public” or...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found