Closed aesteve closed 7 years ago
To unblock you in the meantime, you should be able to make this work by moving that font file to ./public/fonts/SCOREBOARD.ttf
and referencing it via fonts/SCOREBOARD.ttf
.
I believe what you have should work. I will try to reproduce today and get back to you.
From a proof of concept level I got this working as such:
1) Add missing file-loader
dependency (fixed in https://github.com/davezuko/react-redux-starter-kit/commit/178fed5fc05a06c60606eb63911a34340033f289)
2) Place font in ./src/styles/fonts
3) Reference font as follows:
@font-face {
font-family: 'Barrio';
font-style: normal;
font-weight: 400;
src: url('./fonts/barrio.woff2');
}
body {
font-family: 'Barrio', cursive;
}
I'm going to try this with a sass variable next, but if you're having issues I would try dropping the $font-directory
first.
Thanks for that really really quick answer. Much appreciated !
This doesn't work for me unfortunately. I already added file-loader
manually before since without it the project wasn't starting at all.
But still, the font is loaded through GET http://192.168.0.20:3000/fonts/SCOREBOARD.ttf
, and the request gets canceled because of some CORS issue.
@aesteve ah, CORS issue. Could you try to two things:
1) Try your app from http://192.168.0.20:3000 -- it's actually running on your local IP address.
2) If you don't want to have to use that, change this in ./project.config.js
:
// from
publicPath: NODE_ENV === 'development' ? `http://${ip.address()}:3000/` : '/',
// to
publicPath: NODE_ENV === 'development' ? `http://localhost:3000/` : '/',
// if ^^ doesn't work, you can even just do
publicPath: '/',
It uses your IP so that you can access the app from other local devices (for device testing, for example), but I may consider changing the default if CORS is an issue.
See if that helps any.
Ohhh, sorry. This was the issue all along.
I don't know why I was sure the font shouldn't have been served that way. Thus didn't think the CORS was important anyway.
Thank's a lot for your help !
Glad that fixed it, sorry for all the trouble.
I'm sorry to ask this question again, this seems to have been answered a few times, but I can't get fonts working.
I think I followed everything mentioned in other issues, but the font seems to be loaded from :
http://localhost:3000/fonts/MY_FONT.ttf
(the request appears as "Canceled" in Chrome dev tools)The file is in :
src/styles/fonts/MY_FONT.ttf
and is referenced like this :_base.scss
main.scss
Webpack doesn't build any font at all. Is there a wiki page or a FAQ somewhere telling how to deal with fonts ? Sorry to ask, but I've been struggling and digging through the issues for 2 hours now.