DEV Community

loading...
Cover image for Add Custom fonts to react-storybook

Add Custom fonts to react-storybook

Mustafa Alroomi
Developer & Content creator from 🇧🇪 https://coderreview.io
・2 min read

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.

alt text

Running yarn storybook to start your terminal on port: 6006.
You’ll your component normally without the custom fonts if you have one, then 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
ArmWrestler.woff
I have it under src/styles/ArmWrestler.woff
What we need to do first to storybook to add these files is:

  1. Create webpack.config.js inside .storybookdir and add this code in it:

alt text

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.

  1. Add head html file for storybook by creating the file inside your .storybook dir called: preview-head.html and put this in it:

alt text

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
Like below:

alt text

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
Also on Medium
Links: Youtube
Code: https://github.com/codeReview-youtube/story-custom-font

Happy Coding 💻

Discussion (0)