Storybook: Can't load font files using custom webpack

[brendonco]

Cant load font files using custom webpack.

Font files are stored at: src/assets/fonts/[.eot, .ttf, .woff, .woff2]

custom webpack (even using the comment out webpack config below doesnt help):

  config.module.rules.push({
    test: /\.(eot|ttf|woff|otf|woff2)$/,
    include: [path.resolve(__dirname, '../src')],
    use: [
      'file-loader',
    ],
    // use: {
    //   loader: 'file-loader?name=/fonts/[name].[ext]',
    //   options: {
    //     name: 'assets/fonts/[name].[ext]',
    //   },
    // },
  });

Storybook version:

 "@storybook/addon-actions": "^5.0.11",
    "@storybook/addon-info": "^5.0.11",
    "@storybook/addon-links": "^5.0.11",
    "@storybook/addon-storysource": "^5.0.11",
    "@storybook/addons": "^5.0.11",
    "@storybook/react": "^5.0.11",

Please advise.

[shilman]

@brendonco First suggestion is to run storybook with --debug-webpack and see whether there are collisions for those types (I expect there are). If so, you'll probably need to remove the conflicting rules.

[brendonco]

@shilman Thanks. Indeed there is. I tried to remove the conflict rules but still the fonts doesnt get loaded.

Remove below rules.

        { test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/,
          loader: 'C:\\project\\node_modules\\@storybook\\core\\node_modules\\file-loader\\dist\\cjs.js',
          query: { name: 'static/media/[name].[hash:8].[ext]' } },

[diegolamanno]

Has anyone found a solution for this? I used to have it working but after upgrading this stopped working.

[spacegiant]

@diegolamanno I had this issue with loading SVG files.

It seems that Storybook now imports SVG (and some other file types) already so having a custom rule for SVG was causing a problem.

From my .storybook/webpack.config.js I deleted the whole ruleblock relating to the file type I was having problems with and this seemed to fix my problem:

{
    test: /\.svg$/,
    loaders: ["file-loader"]
}

[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!

[alazurenko]

Hi,
Are there any update?
I've stumbled upon the same issue while loading woff2 font 😞

[goranefbl]

I am using sass files and also have @font-face imports in them.

Here is the webpack.config.js that worked for me:

const path = require('path');

module.exports = async ({ config, mode }) => {
    config.module.rules.push(
        {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
            include: path.resolve(__dirname, '../')
        },
        {
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            loaders: ['file-loader'],
            include: path.resolve(__dirname, '../')
        }
    );
    return config;
};

[brendonco]

@goranefbl The config doesn't seem to work. here's my config. I'm using latest version of storybook.

No fonts loaded:

[ndelangen]

Possibly a silly question, but is the font actually used? A browser will only load a font upon finding it's first usage.

[fallemand]

Same problem here after upgrading to 5.3 From 5.2 Can't get it to work

[iampava]

Just got it to work by using CopyWebpackPlugin instead of the file loader.

Our usecase is this: multiple apps in the same repo (monorepo). Among them, one is a library of common UI components, and it also has storybook. The fonts are located in a different app client/. I wanted to import the fonts from client app inside common-ui to be used by storybook.

Inside storybook's webpack.config.js I added:

config.plugins.push(
    new CopyWebpackPlugin({
      patterns: [{
        from: resolve(__dirname, '../../client/src/assets/fonts'),
        to: 'static/fonts'
      }]
    }),
  );

And then, inside preview-head.html I added:

<style>
@font-face {
    font-family: "OurFontName";
    src: url("static/fonts/OurFontName.eot");
    src: url("static/fonts/OurFontName.eot?#iefix") format("embedded-opentype"),
      url("static/fonts/OurFontName.woff2") format("woff2"),
      url("static/fonts/OurFontName.woff") format("woff"),
      url("static/fonts/OurFontName.woff") format("truetype");
    font-weight: bold;
    font-style: normal;
  }

  @font-face {
    font-family: "OurFontName";
    src: url("static/fonts/OurFontName.eot");
    src: url("static/fonts/OurFontName.eot?#iefix") format("embedded-opentype"),
      url("static/fonts/OurFontName.woff2") format("woff2"),
      url("static/fonts/OurFontName.woff") format("woff"),
      url("static/fonts/OurFontName.woff") format("truetype");
    font-weight: 400;
    font-style: normal;
  }
</style>

And it woooorks 🎉