I am displaying my design-tokens using Storybook and Storybook-design-token add-on. For my tokens I need them to be using ‘open-sans’ font-family. But I’m not sure where can I assign them such property.

In a classic example of working with a Storybook, for each component or any visual block we create a story (which means <component_name>.stories.js file). In it, you can easily apply your own styles which obviously includes ‘font-family’ also.

However, while I’m using storybook-design-token add-on things are a little bit different. This add-on is in charge of creating and managing stories for each individual design tokens. To display a specific design token it creates a presenter. This is basically a ReactJS component specifically designed to display the value of a design token. From there on, I can only suppose what is really happening… But I suppose it creates a story for each design token and displays it via the instance of the particular presenter specific for the design token type. This is the reason I don´t have a direct access to a ‘story’ therefore I don’t know where to assign it such ‘font-family’ property.

I know I can create a custom presenter with a specific ‘font-family’. But this is not an ideal solution. I don’t want to create custom presenter for each token type just to be identical to the original one except from ‘font-family’. It would be better if I could somehow assign it globally.

My question is, where or how can I specify ‘font-family’ inside Storybook-design-token? Does the add-on even allow such customization?

Thanks in advance!