Add Custom fonts to Storybook
I will start first by asking, What is Storybook?
You knew that already then you could skip this upcoming part.
Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
Installing Storybook for react apps:
`npx -p @storybook/cli sb init — type react`
This will check your app and start to install all required dependencies for your app, add
stories dir and
.storybook for config your storybook, also two scripts in
package.json one for storybook in Development and another one for build storybook in Production.
yarn storybook to start your terminal on port: 6006.
You’ll your component normally without the custom fonts if you have one, than it will come to the purpose of this article.
Add Custom Fonts
Let’s say that in your app have a custom font for me as an example will be
I have it under
What we need to do first to storybook to add these files is:
Add this code in it.
What that says it will take config that comes from storybook and push my custom handling for fonts with it.so it means that configs will be merged together.[This is not Overriding].
first, one for styling to handle fonts inside any scss files.
A second one for bundling my custom fonts with storybook.
2. Add head Html for storybook by creating a file inside your
preview-head.html and put this in it:
What that says to take fonts inside my styles/and inject in the head of
iframe.html that will be generated from storybook, see the console
3.Update package JSON for watching styling in my app
With that, everything is done your stories should pick the font the same as in the app.
If you like it, don’t forget to hit like and subscribe for more articles and also video’s! Yes, I do have YouTube Channel you could find this already there.
This article has been shared also on Coderreview.io
Links: YouTube Channel