I have a Material UI theme like so:

import { createMuiTheme } from '@material-ui/core/styles'

const primaryColor = '#009baa'

const theme = createMuiTheme({
  typography: {
    fontFamily: ['custom font here'].join(','),
    h1: { color: primaryColor },
    h2: { color: primaryColor, fontSize: '26px' },
  },
  palette: {
    primary: {
      main: primaryColor,
    },
  },
  overrides: {
    MuiButton: {
      root: {
        background: primaryColor,
        textTransform: 'none',
      },
    },
  },
})

export default theme

used in my main app like so:

...
      <ThemeProvider theme={theme}>
        <Provider store={store}>
          <Calendar />
        </Provider>
      </ThemeProvider>
...

I than have a calendar.stories.js like so:

import { storiesOf } from '@storybook/react'
import { CalendarComponent } from "./Calendar"
import { formatAvailabilitiesData } from '../../__mocks__/availabilities'
import { log } from 'util';
import {muiTheme} from 'storybook-addon-material-ui'
import theme from '../../theme'

const props = {
    selectedAvailablity: formatAvailabilitiesData[0],
    selectedDate: new Date('2019-07-24T07:00:00.000Z'),
    dateClick: () => null,
}

storiesOf("Calendar", module)
  .addDecorator(muiTheme([PeabodyTheme]))
  .add("Basic", () => ( 
    <CalendarComponent {...props} />
))

and webpack file for storybook like so:

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
  // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
  // You can change the configuration based on that.
  // 'PRODUCTION' is used when building the static version of storybook.

  // Make whatever fine-grained changes you need
  config.module.rules.push(
  { 
    test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/, 
    loaders: ["file-loader"] 
  });

  // Return the altered config
  return config;
};

The fonts are being displayed correctly in the application but not in the storybook. I have tried to import some local css and everything apart from font-family works, which makes think that is something to do with the loading of the fonts. No error either in the console.

UPDATE

I have even tried to import CSS directly inside my ponent like so:

@font-face {
  font-family: 'Poppings';
  src: url('../../assets/fonts/Poppins-Regular.ttf')
}

h2 {
  font-family: 'Poppings'; 
}

and although this time the font is actually loaded in the network tab the storybook ponent h2 doesn't inherit the custom font....

I have a Material UI theme like so:

import { createMuiTheme } from '@material-ui/core/styles'

const primaryColor = '#009baa'

const theme = createMuiTheme({
  typography: {
    fontFamily: ['custom font here'].join(','),
    h1: { color: primaryColor },
    h2: { color: primaryColor, fontSize: '26px' },
  },
  palette: {
    primary: {
      main: primaryColor,
    },
  },
  overrides: {
    MuiButton: {
      root: {
        background: primaryColor,
        textTransform: 'none',
      },
    },
  },
})

export default theme

used in my main app like so:

...
      <ThemeProvider theme={theme}>
        <Provider store={store}>
          <Calendar />
        </Provider>
      </ThemeProvider>
...

I than have a calendar.stories.js like so:

import { storiesOf } from '@storybook/react'
import { CalendarComponent } from "./Calendar"
import { formatAvailabilitiesData } from '../../__mocks__/availabilities'
import { log } from 'util';
import {muiTheme} from 'storybook-addon-material-ui'
import theme from '../../theme'

const props = {
    selectedAvailablity: formatAvailabilitiesData[0],
    selectedDate: new Date('2019-07-24T07:00:00.000Z'),
    dateClick: () => null,
}

storiesOf("Calendar", module)
  .addDecorator(muiTheme([PeabodyTheme]))
  .add("Basic", () => ( 
    <CalendarComponent {...props} />
))

and webpack file for storybook like so:

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
  // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
  // You can change the configuration based on that.
  // 'PRODUCTION' is used when building the static version of storybook.

  // Make whatever fine-grained changes you need
  config.module.rules.push(
  { 
    test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/, 
    loaders: ["file-loader"] 
  });

  // Return the altered config
  return config;
};

The fonts are being displayed correctly in the application but not in the storybook. I have tried to import some local css and everything apart from font-family works, which makes think that is something to do with the loading of the fonts. No error either in the console.

UPDATE

I have even tried to import CSS directly inside my ponent like so:

@font-face {
  font-family: 'Poppings';
  src: url('../../assets/fonts/Poppins-Regular.ttf')
}

h2 {
  font-family: 'Poppings'; 
}

and although this time the font is actually loaded in the network tab the storybook ponent h2 doesn't inherit the custom font....

• javascript
• reactjs
• storybook

Share Improve this question Follow edited Oct 10, 2019 at 12:14 Aessandro asked Oct 4, 2019 at 9:31 AessandroAessandro 5,7832121 gold badges7373 silver badges146146 bronze badges 2

• Did you solve this issue? – Miguel Trabajo Commented Apr 17, 2020 at 3:54
• @font-face won't download fonts if its within shadow dom boundaries. you have to try and add font-face in the top-level dom – HiRenS Commented Feb 11, 2021 at 7:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

I suggest the following:

1. If these are local fonts, otherwise ignore: Create a css file for fonts, in which you only define the @font-face for your fonts.
2. Create a file preview-head.html where your Storybook configurations are, ie, .storybook.
3. In this file, add a line each for the css files containing font-face definitions in a link tag, such as:

<!-- local fonts -->
<link rel="stylesheet" href="./fonts/fonts.css" />

<!-- external font (I just copied the code for a random font from Google -->
<link rel="preconnect" href="https://fonts.googleapis.">
<link rel="preconnect" href="https://fonts.gstatic." crossorigin>
<link href="https://fonts.googleapis./css2?family=Castoro:ital@1&display=swap" rel="stylesheet">