How to include basic styles and fonts in a storybook?

Question

JavaScript

Hello, I am writing a website in react. I'm still making components in the storybook.
The question arose of how to correctly connect fonts styles in a storybook.
The project hierarchy is as follows:

-.storybook
    -config.js
    -webpack.config.js
    -preview-head.html (сюда руками базовые стили и шрифты подключаю, но шрифты не подхватывает)
-node__modules
-public
    -fonts
         - тут шрифты.woff
    -img
        - картинки
    -favicon.ico
    -index.html
-src
    -components
        - тут компоненты
    -containers
        - тут контейнеры
    -pages
        - тут страницы
    -App.jsx
    -Fonts.styl (тут подключаются шрифты и импортируются в Main.styl)
    -index.js
    -Main.styl
    -Variables.styl (тут переменные)
-.browserslistrc
-.gitignore
-package-lock.json
-package.json

It turns out that I take preview-head.hml and write basic css in it with pens (for the entire page and include fonts:

@font-face {
    font-family: 'FuturaBook';
    font-weight: normal;
    src: url('../public/fonts/FuturaBookC.woff'), format('woff'), ;
  }

here is one font-face
, of course, I screwed up with the paths, but I don’t know where the storybook calculates the relative path from.
Maybe you need to connect .styl-files directly to webpack.configin .storybook?
Thanks