Apply custom fonts in Storybook with CRA/styled-components?

user_14002183 0
Viewed 1043

Hi I'm trying to use storybook with React. Currently working with an app built by create-react-app and using styled-components. Now I am stuck with importing custom fonts into storybook preview page.

Interestingly, the custom fonts work fine in safari but not in chrome. But I'd like to know how to use it with chrome since we work with chrome most of the time. I have grobalStyles in styled-components including fonts. Tried some solutions I found online Like tried to put some codes in preview-head.html and manager-head.html but none worked in chrome. It works with links for google font API including in *-head.html but I need to use custom fonts from my local.

Any advice?

package.json

 "storybook": "start-storybook -p 6006 -s ./src",
 ...

folder structure

|- .storybook
   |- ...
|- src
   |- ...
   |- assets
      |- ...
      |- fonts
         |- NotoSansJP-Regular.ttf
         |- ... .ttf
         |- NotoSansJP.css
   |- lib
      |- ...
      |- styled-components
         |- grobalStyles.ts

.storybook/preview.js

import React from 'react';
import { ThemeProvider } from 'styled-components';
import { addDecorator } from '@storybook/react';
import { theme } from '../src/lib/styled-components/theme';
import { GlobalStyle } from '../src/lib/styled-components/globalStyle';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
};

addDecorator((storyFn) => (
  <ThemeProvider theme={theme}>
   <GlobalStyle />
   {storyFn()}
  </ThemeProvider>
));

.storybook/webpack.config.js

const path = require('path');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loaders: ['file-loader'],
        include: path.resolve(__dirname, '../'),
      },
    ],
  },
};

GrobalStyle.js

import { createGlobalStyle } from 'styled-components';
import '../../assets/fonts/NotoSansJP-Regular.ttf';
import '../../assets/fonts/NotoSansJP-Bold.ttf';
import '../../assets/fonts/NotoSansJP-Light.ttf';

export const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: "Noto Sans JP";
    src: local("Noto Sans JP"),
      url("./assets/fonts/NotoSansJP-Regular.ttf") format("truetype");
    font-weight: normal;
  }
  @font-face {
    font-family: "Noto Sans JP";
    src: local("Noto Sans JP"),
      url("./assets/fonts/NotoSansJP-Bold.ttf") format("truetype");
    font-weight: bold;
  }
  @font-face {
    font-family: "Noto Sans JP";
    src: local("Noto Sans JP"),
      url("./assets/fonts/NotoSansJP-Bold.ttf") format("truetype");
    font-weight: 700;
  }
  @font-face {
    font-family: "Noto Sans JP";
    src: local("Noto Sans JP"),
      url("./assets/fonts/NotoSansJP-Light.ttf") format("truetype");
    font-weight: light;
  }
  * {
    font-family: "Noto Sans JP";
    font-size: 16px;
  }
  ...
`

Also tried: preview-head.html and manager-head.html

<link rel="stylesheet" href="./assets/fonts/NotoSansJP.css" />
<style type="text/css">
 * {
    font-family: 'Noto Sans JP';
    font-size: 16px;
  }
</style>
storybook styled-components reactjs fonts javascript
1 Answers

You can try this code or you can use webfontloader its awsome libery for fonts.

import { createGlobalStyle } from 'styled-components';
import NotoRegular from '../../assets/fonts/NotoSansJP-Regular.ttf';

export const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: "Noto Sans JP";
    src: local(${NotoRegular}),
      url(${NotoRegular}) format("truetype");
    font-weight: normal;
  }
user_111326700
Related