Add Custom fonts to Storybook

Photo by Charisse Kenion on Unsplash

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.

Running 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

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.jsinside .storybook directory.

Add this code in it.

.storybook/webpack.config.js

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 .storybookcalled:

preview-head.html and put this in it:

.storybook/preview-head.html

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:

package.json

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

Code:https://github.com/codeReview-youtube/story-custom-font

Happy Coding!!!