Storybook: Failed to decode downloaded font

[mt-roberto]

Description
Storybook 5 fails to decode custom fonts. The console returns: Failed to decode downloaded font: http://localhost:9001/static/media/fonts.ttf.

The font is available when accessing that url directly: http://localhost:9001/static/media/fonts.ttf

To Reproduce
Just import the font in one of your jsx files:

import 'custom-font/style.css';

Expected behavior
Version 4 of Storybook was working correctly.

System:

• OS: MacOS
• Device: Macbook Pro 2018
• Browser: chrome
• Framework: react

[shilman]

@ndelangen @tmeasday any idea what could be happening here?

[tmeasday]

No idea -- any chance of a reproduction @mt-roberto?

[mt-roberto]

I think it has to do with the webpack configuration, according to this issue on webpack: https://github.com/webpack/webpack/issues/1468

[tmeasday]

@mt-roberto are you importing the font from JS? Your code snippet imports CSS (which I assumed imported the font via CSS syntax, not webpack).

If you are importing the font directly, are you using a loader for that? You might be tripping up on the fact that SB5 adds file loader to the default configuration

[mt-roberto]

Ok, I fixed this replacing the fonts rules on Storybook webpack with my rules:

  let fontCssRule = config.module.rules.find(rule => rule.test.toString() === /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/.toString());

  fontCssRule = {
    test: /\.woff(\?.*$|$)/,
    loader: 'url-loader?limit=10000&mimetype=application/font-woff'
  },
    {
      test: /\.(ttf|eot|svg)(\?.*$|$)/,
      loader: 'url-loader'
    },
    {
      test: /\.(gif|png|jpe?g|svg|ico)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          },
        },
        {
          loader: 'image-webpack-loader',
          options: {
            bypassOnDebug: true,
            mozjpeg: {
              progressive: true,
              quality: 65
            },
            // optipng.enabled: false will disable optipng
            optipng: {
              enabled: true,
            },
            pngquant: {
              quality: '65-90',
              speed: 4
            },
            gifsicle: {
              interlaced: false,
            },
            // the webp option will enable WEBP
            webp: {
              quality: 75
            }
          }
        }
      ]
    }; 

[churichard]

I was running into the same issue and excluding the rule that @mt-roberto mentioned fixed it. Would doing this break anything in Storybook, or is it safe to do?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

@churichard It should be fine, see: https://github.com/storybooks/storybook/pull/6341/files

@mt-roberto @churichard Should this be changed in the default Storybook webpack config?

[iztsv]

@shilman I've checked it using storybook 5.0.3 and it works without my custom rule for fonts:

config.module.rules = config.module.rules.map(rule => {
  if (rule.test.toString() === /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/.toString()) {
    return configureFontLoader();
  }

  return rule;
});

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[edgardz]

Solved here setting webpack.config.js like:

module.exports = async ({ config }) => {
  config.module.rules = config.module.rules.map(rule => {
    if (rule.test && rule.test.toString().includes('woff')) {
      return {
        ...rule,
        test: /\.(svg|ico|jpg|jpeg|png|gif|webp|cur|ani|pdf)(\?.*)?$/
      }
    }
    return rule
  })
  return config

[natterstefan]

Thank you @edgardz, worked for me as well.

[nicosampler]

@edgardz
you man saved my day!