React-redux-starter-kit: Can't get fonts working

[aesteve]

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

$font-directory: './fonts';

main.scss

@font-face {
  font-family: "Scoreboard";
  font-weight: bold;
  src: url('#{$font-directory}/SCOREBOARD.ttf');
}

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.

[davezuko]

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.

[davezuko]

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.

[aesteve]

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.

[davezuko]

@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.

[aesteve]

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 !

[davezuko]

Glad that fixed it, sorry for all the trouble.