React-redux-starter-kit: Where to serve fonts from?

[hamishtaplin]

Although you can probably just serve fonts from the static directory, there's some config for fonts in webpack but I don't seem to be able to get it to pick any up. Is there some specific place they need to be?

[alexmuro]

+1

[SimonSelg]

I'll post you a snipped from my project as soon as I get home.

[SimonSelg]

Sorry, i totally forgot about this one. You probably figured it out by now, but just in case this is how I'd do it:

Suppose you have your font roboto.woff in ~src/assets/fonts/, and you want to make it available in your app, so you can use it with font-family: roboto.

Then you have to include it w/ @font-face somewhere in your code. A good place would be ~src/styles/core.css:

@import 'base';

// make roboto available
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto.woff) format('woff');
}

Webpack will recognize that your css depends on ~src/assets/fonts/roboto.woff and therefore bundle the roboto.woff correctly.

Hope this helps. If not, just let me know what's still unclear.

[alexmuro]

@SimonSelg Thanks for the reply. This works fine for me in development mode but when I compile for production using

 NODE_EDNV=production npm run compile

the fonts don't make it through. Any ideas?

[SimonSelg]

Works fine on my setup. Could you make an reduced test case to reproduce the problem?

[geohuz]

I'm trying to use Font Awesome icon fonts in the project, using the latest clone from the git. But I have tried hours to make it work 'by chance', and I totally have no idea why it works in this way. I have to extract @font-face part and put into core.scss, like this:

@font-face {
  font-family: 'FontAwesome';
  src: url('../assets/fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../assets/fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'),
      url('../assets/fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'),
      url('../assets/fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'),
      url('../assets/fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'),
      url('../assets/fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

:global {
@import 'font-awesome';
}

so question

1: I can't put fonts folder under the styles directory, it will reports "Module not found: Error: Cannot resolve module 'fonts/fontawesome-webfont.eot' in styles", and I'm sure the fonts folder is under styles. So when I saw your example, I put into the src/assets/fonts, then It works. I'm so confused.

2: As you see, I have modified the font-awesome.css and cut off the @font-face part into core.scss, then the actually import in the :global part. Is there any explanation for this behavior?

[GerritWanderer]

Hey folks,

I've also added new fonts and it was only working how @geohuz has explained it.
Move fonts into src/assets/fonts and define them via font-face above the :global statement.

Cheers,
Gerrit

[alex-fernandez306]

I resolved the issue by placing the fonts in styles/fonts. Then placed added $fa-font-path: 'fonts';
in the _base.scss and it worked.

[davezuko]

Closing as resolved for now, will pin to FAQ.