CODEWITHSUNDEEP
javascriptreactjsstyled-componentsstorybook
anandharshan
anandharshan

Reputation: 6342

How to add custom fonts to story book component builder?

I am building an component library with React + Storybook + Typescript

I am also given a new font style to be used in the new components being build

How do i add the font typing to storybook

I found a potential way : https://medium.com/@mushti_dev/hey-e6faa20b910a

Leads i got from storybook : https://storybook.js.org/docs/configurations/add-custom-head-tags/

Upvotes: 1

Views: 4559

Answers (1)

anandharshan
anandharshan

Reputation: 6342

Got it solved

Added a config.js file in .storybook folder

And imported the css file containing the fonts

import './../src/styles/icons/icons.css';

icons.css

@font-face {
  font-family: 'pvlolzicons';
  src:
    url('fonts/pvlolzicons.ttf?ur0pfm') format('truetype'),
    url('fonts/pvlolzicons.woff?ur0pfm') format('woff'),
    url('fonts/pvlolzicons.svg?ur0pfm#pvlolzicons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

Upvotes: 2

Related Questions