Storybook: How to use custom fonts?

[code-by]

I have React Native project that I make to work for web too using React Native Web.
The project use custom fonts, ex. OpenSans.
How do I need to link fonts in the project to use in web storybook also?
Or I need specify it in the project itself?
Thank you

[ndelangen]

I'm not sure how you add custom fonts to react-native itself. So maybe you can educate me a little on how that looks in code?

Sounds to me all you need to do is define the font face family somewhere.
1 place where you can do that is in the head.html file which storybook will load/inject if provided.

https://github.com/necolas/react-native-web/issues/190

[code-by]

@ndelangen
I add and use fonts this way:

const MyStyles = StyleSheet.create({
  textInput: {
   fontFamily: 'opensans_light',
  }
} 

And fonts itself is in /android/app/src/main/assets/

[ndelangen]

perhaps @z4o4z can help you with this?

[z4o4z]

@code-by as said @ndelangen you can add fonts to head.html by using @font-face definition

[jamesleech]

for anyone else that ends up here looking for a solution.
It isn't great but it works.

src/App.js

export const loadAllAssests = [
  Asset.loadAsync([
    require('../assets/images/logo.png'),
  ]),
  Font.loadAsync({
    ...Icon.Ionicons.font, // This is the font that we are using for our tab bar
    black: require('../assets/fonts/CircularStd-Black.ttf'),
    bold: require('../assets/fonts/CircularStd-Bold.ttf'),
  }),
];

export default class App extends React.Component<Props, State> {
  state = {
    isLoadingComplete: false,
  };

  loadResourcesAsync = async () => Promise.all(loadAllAssests);

  ...
}

storybook/index.js

import { loadAllAssests } from '../src';
...

Promise.all(loadAllAssests).then(() => {
  console.log('loadResourcesAsync done'); // this is quick enough that it works.
});

// import stories
configure(() => {
  loadStories();
}, module);

// Refer to https://github.com/storybooks/storybook/tree/master/app/react-native#start-command-parameters
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({});

export default StorybookUIRoot;

[Lpaydat]

Like in @z4o4z comment.
I used the method provided in this link add-custom-head-tags

And then just add font-family under <script>...</script>.
It works like charm :)

[iampava]

Just posted this comment inside a different issue but which seems similar: https://github.com/storybookjs/storybook/issues/7335#issuecomment-631994613 Might help :)