Custom Font in @storybook/theming Not Working

[jpmarra]

Hey folks! Looking to add some brand flavor to our Storybook, and I'm unable to configure a custom font inside of the create fn.

I have the font loaded in and defined in our css for our components. Is there somewhere else I need to define the font face in order for it to be available for use within the fontBase property of create? Any help would be appreciated!

Here's what I have at the moment:

// viceTheme.js

import { create } from '@storybook/theming/create';

export default create({
  base: 'light',
  colorPrimary: 'black',
  colorSecondary: 'white',

  // UI
  appBg: 'black',
  appContentBg: 'white',
  appBorderColor: 'white',
  appBorderRadius: 0,

  // Typography
  fontBase: '"Source Code Pro", sans-serif', // <-- DOESN'T WORK CURRENTLY
  fontCode: 'monospace',

  // Text colors
  textColor: 'white',
  textInverseColor: 'black',

  // Toolbar default and active colors
  barTextColor: '#ccc',
  barSelectedColor: 'white',
  barBg: 'black',

  // Form colors
  inputBg: 'black',
  inputBorder: 'white',
  inputTextColor: 'white',
  inputBorderRadius: 0,

  brandTitle: 'VICE',
  brandUrl: 'https://vice.com',
  brandImage: 'https://placehold.it/350x150',
});

[shilman]

@domyen @ndelangen ?

[ndelangen]

That would be a bug, I think... the ThemeVar property is used / converted here:

storybook/lib/theming/src/convert.ts

Lines 120 to 122 in a18f7e1

	typography: {
	fonts: {
	base: fontBase,

But it might just not be used in some places (styled components)?

Noteworthy seems to be this gem:

storybook/addons/docs/src/blocks/Wrapper.tsx

Lines 3 to 5 in 99b6956

	export const Wrapper: FunctionComponent = ({ children }) => (
	<div style={{ fontFamily: 'sans-serif' }}>{children}</div>
	);

[thesobercoder]

I'm also stuck with the same issue. Please specify a workaround.