Add @fontface to Storybook

I have a Storybook created in a create-react-app and I want to add a font-face to it. My components are using css-modules (maybe that is useful information).

So, I have created a webpack.config.js inside .storybook and it looks like this:


module.exports = async ({ config }) => {
  config.module.rules.push({
    test: /\.(woff|woff2|eot|ttf|svg)$/,
    use: [
      {
        loader: 'file-loader',
        query: {
          name: '[name].[ext]',
        },
      },
    ],
    include: path.resolve(__dirname, '../'),
  });

  return config;
};

and in preview-head.html (inside .storybook) I have

<style>
    @font-face {
      font-family: 'WalsheimPro';
      font-style: normal;
      font-weight: 400;
      src: url('shared/fonts/GTWalsheimProMedium.ttf') format('truetype');
    }
</style>

My font does not work, any idea why? Any other info you need to help me? Thanks :)

Solution

Ok, so I did not need the webpack.config.js file. I deleted it, but changed my paths in package.json from public to ./src

    "storybook": "start-storybook -p 6006 -s ./src",
    "build-storybook": "build-storybook -s ./src",

Check the answer above for links :)