Storybook: Font-face not loading properly

[renanvalentin]

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!

[mnmtanish]

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

start-storybook -p 6977 -s ./public

[renanvalentin]

Hi @mnmtanish !

I've tried that before, my fonts are located at:

.
|--src
|----fonts

and my package is like this:

"storybook": "start-storybook -p 9001 -s ./src/fonts"

I've should be doing something wrong, because I can request it from the browser :/

Thanks!

[renanvalentin]

I couldn't figure out why it is not working, but after increasing the url limit loader size from 10000 to 100000 it started to work. that's crazy 🚶 .

[renanvalentin]

It's using base64 now, I suppose that was some encoding problem. 😞

[edorivai]

Having the exact same problem.

Webpack/storybook generates the following CSS:

@font-face {
  font-family: 'Montserrat';
  src: url(/static/0ae39139cfa9ae65e514ebb0a04452d8.woff2) format("woff2"), url(/static/82797e193fe5263e88f901eaaac800d8.woff) format("woff");
}

But none of the woff files is ever loaded:

I've added the -s flag: start-storybook -p 9001 -c ./src/.storybook -s ./static/dist, which works perfectly fine with images.

The relevant font loaders:

{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },

And like @renanvalentin, the font works in inline/base64 mode (when I increase the file limit).

Additionally, my production build and webpack-dev-server work fine. The woff files are properly loaded if I spin up my complete app.

[julienp]

I ran into the same issue, and after noticing that it worked fine in Safari, but not in Chrome I found the following explanation http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#34133809

As per the Stackoverflow explanation, the fix is to set an absolute output path in the storybook webpack config:

storybookBaseConfig.output.publicPath = 'http://localhost:9001/'

I'm using full control mode for the config https://github.com/kadirahq/react-storybook/blob/master/docs/webpack_full_control_mode.md

[erikthedeveloper]

I will echo @julienp and say that I've been experiencing this and it appears to only affect Chrome. Related to http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#34133809

Setting an absolute path for config.output.publicPath as recommended fixed the issue for me. @arunoda, could it be worthwhile to set the default publicPath config value to an absolute path to avoid this?

My [working] config:

// .storybook/webpack.config.js

const {
  styleLoader,
  fontLoader,
} = require('../webpack/pieces');

/**
 * See: https://getstorybook.io/docs/react-storybook/configurations/custom-webpack-config
 */
module.exports = function(storybookConfig) {
  // Set an absolute public path. Required for reasons of JS-imported styles
  // See: http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#34133809
  Object.assign(storybookConfig.output, {
    publicPath: 'http://localhost:6006/',
  });

  // Enable JS-imported styles/fonts
  storybookConfig.module.loaders.push(
    styleLoader,
    fontLoader
  );

  return storybookConfig;
};

...and in case this helps anybody who stumbles onto this issue, here are my loaders from my webpack/pieces.js

const styleLoader = {
  test: /\.scss$/,
  loaders: [
    'style-loader',
    'css-loader?sourceMap',
    'postcss-loader?sourceMap=inline',
    'sass-loader?sourceMap',
  ],
  include: PATHS.appAssetsSrc,
};

const fontLoader = {
  test: /\.ttf$|\.woff$|\.woff2$/,
  loader: 'file-loader',
  options: {
    name: 'fonts/[name].[ext]',
  },
  include: PATHS.fontsSrc,
};

:memo: This is part of the solution I came to while resolving the Webpack 2.x related issue I ran into mentioned here: https://github.com/storybooks/react-storybook/issues/388#issuecomment-271662853

[Aarbel]

I solved it using a static on storybook-start :

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