React-redux-starter-kit: How to put fonts?

[OpakAlex]

i have fonts files in styles: http://take.ms/SSYZt
then i have file to loads fonts: http://take.ms/TkwJW
then i import this file to core.scss into :global and nothing.

[davezuko]

Until better workarounds are found, I recommend reading through https://github.com/davezuko/react-redux-starter-kit/issues/403 and see if that helps.

[jgo4th]

Has there been any updates on this? I have looked through #403 and attempted to implement the solutions listed there with no avail. I saw you mentioned in that issue thread about adding some information to the FAQ on how to properly do this?

[davezuko]

@jgo4th There have not yet, sorry. This has been a long running issue, so I apologize for that. I'm currently trying to limit my non-work-related coding/typing due to wrist pains, so it may still be a while until I can really dig into the heart of it.

[vinpac]

Remove them from :global scope. If you look at the output css, you will see there are double brackets into every "@expression" ( e.g. @font-face{{ ... }} ), therefore making it not work.

This is my core.scss working perfectly.

$red: #D95E40;
$green: #34bf49;
$linkColor: #298eea;

@import 'vendor/font-awesome';
@import 'vendor/roboto';
@import 'main';
@import 'base';

html {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body, input, textarea, button {
  font-family: Roboto, sans-serif;
}

It will work perfectly :D I struggled to make it work too, until I look at the ouput css.

[jgo4th]

@vini175pa how did you view the output.css? I am new to the whole react ecosystem.

[vinpac]

Use 'Inspect' of your browser to view your page elements. There there's a link to a css file that is the output css. Its name is probably hashed ( e.g. app.912893u8na.css )

[davezuko]

Closing per @vini175pa 's tips. If you are still having issues let me know and we can reopen.

[vinceh]

@davezuko I'm still having issues since I'm using a custom font. If I remove them from :global I get a module not found error. If I keep them inside the :global scope I can see the double {{ }} brackets in my @font-face preventing it from working. Any help here?

[vinpac]

@vinceh
Maybe the path to the font is wrong. Look, this is how I got it to work:

/src/styles/vendor/_roboto.scss, this is the file that loads Roboto font.

/* BEGIN Light */
@font-face {
  font-family: Roboto;
  src: url("../static/fonts/Roboto/Light/Roboto-Light.woff2?v=1.1.0") format("woff2"), url("../static/fonts/Roboto/Light/Roboto-Light.woff?v=1.1.0") format("woff"), url("../static/fonts/Roboto/Light/Roboto-Light.ttf?v=1.1.0") format("truetype");
  font-weight: 300;
  font-style: normal;
}
/* END Light */
...

My fonts are located in /src/static/fonts

[bhj]

Same issue as @vinceh here; trying to use Font Awesome installed via npm, my core.scss looks like:

$fa-font-path: '~font-awesome/fonts';

:global {
  @import 'base';
  @import '~normalize.css/normalize';
  @import '~font-awesome/scss/font-awesome.scss';
...

Webpack is happy but I get the double bracket issue (@font-face{{ ... }}) in the generated CSS. Am I missing something or is this not possible?

[vinpac]

@bhj As I said: "Remove them from :global scope. If you look at the output css, you will see there are double brackets into every "@expression" ( e.g. @font-face{{ ... }} ), therefore making it not work."

@import '~font-awesome/scss/font-awesome.scss';
:global {
  @import 'base';
  @import '~normalize.css/normalize';

Will solve the problem

[bhj]

Hi @vini175pa I still get the same error as @vinceh if I do that ("Module not found" for each font)

If I work around that and copy /node_modules/font-awesome/fonts to /src/styles/fonts and then make core.scss

$fa-font-path: 'styles/fonts';
@import '~font-awesome/scss/font-awesome.scss';

:global {
  @import 'base';
  @import '~normalize.css/normalize';
...

... then the output CSS has all the FA classes namespaced to core__ and not usable from elsewhere.

[vinpac]

Oh, I see. Here's a workaround: https://github.com/css-modules/css-modules/issues/95

[bhj]

Thanks for the hint @vini175pa! I ended up creating a folder like /src/styles/nomodule with a font-awesome.scss:

$fa-font-path: '~font-awesome/fonts';
@import '~font-awesome/scss/font-awesome.scss';

I import this file in CoreLayout.js rather than core.scss. Then over in /build/webpack.config.js, in the // Loaders for styles that need to be treated as CSS modules section, I added to the .scss loader configuration:

    exclude: /src\/styles\/nomodule/,

And below that in the // Loaders for files that should not be treated as CSS modules. section, I changed the .scss loader configuration from

  exclude: excludeCSSModules,

to

  include: /src\/styles\/nomodule/,

Hacky, but it seems to work and I can use Font Awesome straight from node_modules without copying files around. I totally see what @davezuko is getting at with #787 now and would love to know a better way of doing this.