Can't load font files using custom webpack

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.

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

[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;
};