How to include Fonts package and CSS frameworks in Angular Story Book?

Question

Where do we include any external fonts in Angular storybook ? I'm using materialize css and some google fonts. HTML :

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400" rel="stylesheet">

CSS: Within angular-cli.json I have this

  "styles": [
    "styles.css",
    "../node_modules/materialize-css/dist/css/materialize.css"
  ]

Answer 1

About the link tags for loading Google fonts, Custom Head Tags is designed for such situation:

Add a file named preview-head.html under .storybook directory (by default), where is the html tags that you want to insert:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

To load styles listed in angular.json file (angular-cli.json has been replaced since Angular 6 +), make sure that you have installed the @storybook/angular version 5+, which has provided a default webpack configuration internally that would read configuration from angular.json configuration. See the official example: https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/package.json

I've been using the features above with Angular 8 and they work at the version of 5.3