Configure Storybook with Global Stylesheets and Fonts
Most projects have global stylesheets (even if just resets) and custom fonts.
In Storybook configuration that impacts the entire project can be found in the
Here we can utilize the undelying bundler (Webpack, or Vite) to simply import a
Simple as that! Whatever your bundler allows you to do or setup will work here.
Now let’s talk about fonts.
Providers like Google Fonts often give you a
link tag to add to your
Storybook allows us to insert arbitrary HTML into the
head element via
Let’s create the
preview-head.html file. Paste our font link in.
And use the CSS file we imported earlier to set it as the global font.
And just like that we’ve customized our globaly Storybook environment with css and fonts.