Font-face not loading properly

Hey guys nice work!!!

I’ve could setup and running storybook, but I wasn’t able to load static files:

this is my config:

package.json: "storybook": "start-storybook -p 9001"

webpack.config:

const path = require('path');

const localIdentName = '[name]__[local]___[hash:base64:5]';

const cssLoader = [
  'css?minimize&modules',
  'sourceMap',
  'importLoaders=1',
  'localIdentName=' + localIdentName
].join('&');

const fontsFileName = `fonts/[name].[ext]`;
const imagesFileName = `img/[name].[ext]`;

module.exports = {
  resolve: {
    root: path.resolve(__dirname, '../src'),
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        include: path.resolve(__dirname, '../src'),
        loaders: [
          'style',
          cssLoader,
          'postcss-loader',
          'sass?sourceMap'
        ]
      },
      {
        test: /\.woff(\?.*)?$/,
        loader: `url?prefix=fonts/&name=${fontsFileName}&limit=10000&mimetype=application/font-woff`,
      },
      {
        test: /\.woff2(\?.*)?$/,
        loader: `url?prefix=fonts/&name=${fontsFileName}&limit=10000&mimetype=application/font-woff2`
      },
      {
        test: /\.ttf(\?.*)?$/,
        loader: `url?prefix=fonts/&name=${fontsFileName}&limit=10000&mimetype=application/octet-stream`
      },
      {test: /\.eot(\?.*)?$/, loader: `file?prefix=fonts/&name=${fontsFileName}`},
      {test: /\.svg(\?.*)?$/, loader: `url?prefix=fonts/&name=${fontsFileName}&limit=10000&mimetype=image/svg+xml`},
      {test: /\.(png|jpg)$/, loader: `url?limit=5192&name=${imagesFileName}`}
    ]
  },
  sassLoader: {
    includePaths: path.resolve(__dirname, '../src/styles')
  }
};

this is the output created by webpack:

@font-face{
   font-family:lato;src:url(/static/fonts/Lato-Regular.ttf);
   font-weight:400;
   font-style:normal
}

@font-face{
   font-family:lato;src:url(/static/fonts/Lato-Semibold.ttf);
   font-weight:600;
   font-style:normal
}

@font-face{
   font-family:lato;
   src:url(/static/fonts/Lato-Light.ttf);
   font-weight:300;
   font-style:normal
}

If I hit localhost:9001/static/fonts/Lato-Regular.ttf it will download the font properly, but when I load the page it is not loaded 😕

Any ideas?

Thanks in advance!

[thani-sh]

Hi @renanvalentin Add the -s switch with start-storybook command as explained here.

start-storybook -p 6977 -s ./public

[Aarbel]

I solved it using a static on storybook-start :

start-storybook -p 9001 -c .storybook watch-css -s ./src