I'm new to webpack and I'm trying to load custom fonts into stroybook v4 following this tutorial /@mushti_dev/hey-e6faa20b910a

The workspace structure looks like this (create-react-app + storybook)

my-project/
  .storybook
     config.js
     preview-hrad.html
     webpack.config.js
  fonts
    MyCustomFont.woff
  src
    ponents
       Title.js
    containers
    styles
       MyCustomFont.woff
    index.js
  stories

When loading the font from the styles folder in src, the config is as follows:

webpack.config.js

const path = require('path');

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

  return config;
};

preview-head.html

<style type="text/css">
  @font-face {
    font-family: 'MyCustomFont';
    src: url('styles/MyCustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
</style>

Title.js

import React from 'react';

const Title = ({ title }) => {
  return (
    <div>
      <h2 style={{fontFamily: 'MyCustomFont'}}>{title}</h2>
    </div>
  );
};

export default Title;

My question is how to load MyCustomFont.woff from the fonts folder ?

I tried to update the webpack config with name: 'fonts/[name].[ext]', and the css style with src: url('fonts/MyCustomFont.woff') format('woff'); but I'm having hard time matching the correct font path.

I'm new to webpack and I'm trying to load custom fonts into stroybook v4 following this tutorial https://medium./@mushti_dev/hey-e6faa20b910a

The workspace structure looks like this (create-react-app + storybook)

my-project/
  .storybook
     config.js
     preview-hrad.html
     webpack.config.js
  fonts
    MyCustomFont.woff
  src
    ponents
       Title.js
    containers
    styles
       MyCustomFont.woff
    index.js
  stories

When loading the font from the styles folder in src, the config is as follows:

webpack.config.js

const path = require('path');

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

  return config;
};

preview-head.html

<style type="text/css">
  @font-face {
    font-family: 'MyCustomFont';
    src: url('styles/MyCustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
</style>

Title.js

import React from 'react';

const Title = ({ title }) => {
  return (
    <div>
      <h2 style={{fontFamily: 'MyCustomFont'}}>{title}</h2>
    </div>
  );
};

export default Title;

My question is how to load MyCustomFont.woff from the fonts folder ?

I tried to update the webpack config with name: 'fonts/[name].[ext]', and the css style with src: url('fonts/MyCustomFont.woff') format('woff'); but I'm having hard time matching the correct font path.

• javascript
• reactjs
• webpack
• storybook

1 Answer 1

I just ran into this issue on storybook v6.1, then realised there are actually two font areas to setup:

• iframe preview fonts (ponents preview fonts in preview-head.html)
• storybook dashboard fonts (dashboard navigation fonts in manager-head.html)

What I did:

• make a copy of preview-head.html and rename to manager-head.html
• ensure the font url specified in @font-face is relative to static folder path specified in npm scripts with -s
• I did not change webpack config in main.js

my folder structure

|- .storybook/
   |- ...
   |- preview-head.html
   |- manager-head.html
|- src/
   |- ...
   |- fonts/
      |- font-name.otf

preview-head.html and manager-head.html

<style type="text/css">
  @font-face {
    font-family: 'font-name';
    src: url('fonts/font-name.otf') format('opentype');
    ...
  }
</style>

package.json

{
  ...
  "scripts": {
    ...
    "storybook": "start-storybook ... -s ./src",
    "build-storybook": "build-storybook -s ./src"
  }
}