How to change font family while using storybook-design-token

[Grzegorz-Molin]

Summary

For displaying my design tokens, I am using a wonderful plugin storybook-desing-token. However, I am struggling with setting up my custom font family.

I know about theming (as it is explained here: theming docs of storybook and it ability to set fontBase. I am doing so in the manager.ts:

However, it only affects the fonts in the navbar on the left. Fonts in content are getting overriden and they get value of : Nunito sans:

My question is, why? And how can I fix it?

Additional information

My main.js looks like this:

/** @type { import('@storybook/web-components-vite').StorybookConfig } */
const config = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@chromatic-com/storybook', 'storybook-design-token'],
  framework: {
    name: '@storybook/web-components-vite',
    options: {}
  },
  docs: {
    autodocs: 'tag'
  }
}
export default config

Create a reproduction

No response

[Grzegorz-Molin]

Ok, I have figured it out.

I realized that since I am using MDX files for displaying these stories from storybook-design-token my global theming of Storybook won´t affect it. The theming docs even mentioned it:

Storybook docs uses the same theme system as Storybook’s UI but is themed independently from the main UI.

That is why it did not get affected. The fix was to... unexpectedly follow the docs of styling mdx files in preview.ts file:

Closing question