How To Config Webpack To Load Custom Fonts Into Storybook?

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

Solution 1:

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

• iframe preview fonts (components 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

<styletype="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"}}