Storybook: Fonts are not loaded correctly

[ilya-pyatin]

Hello:

I have an issue that fonts are not displayed. I have found that it is because the font files end up containing JS code. For example, here is what a font file (Roboto-Regular.4db8a3e8.ttf) contains:

module.exports = __webpack_public_path__ + "df7b648ce5356ea1ebce435b3459fd60.ttf";

The fonts are displayed on the project, but when I use Storybook with the same webpack.config, I have this issue. The webpack.config contains the rule required for the fonts:

{
  test: /\.(eot|ttf|woff|woff2)$/,
  loader: 'file-loader'
}

So I don't know what can be causing this issue, would appreciate any help.

Thank you

[ilya-pyatin]

I have found a way to fix this issue. I have check the default config and it appears that there is already a loader specified for fonts, and the issue was probably because there were two loaders. In any case, by making sure that there is only one loader for fonts specified (the one in the default Storybook config) I was able to get rid of this issue.

[VincentCharpentier]

Not sure this should have been closed without a fix. We lost a few hours on this

[rwieruch]

Do you have a fix for it @VincentCharpentier ?

[VincentCharpentier]

@rwieruch Nothing ideal, I just ignored the issue until it is fixed.
Maybe you can try @ilya-pyatin 's solution of using only the default storybook webpack rule for fonts.
Let me know if you find something interesting, I'd be happy to fix that in my project too