Storybook＋NuxtJsでWebフォントを当てる際の備忘録

問題

nuxt.config.jsで読み込みを設定していたWebフォントが、
Storybookの画面で読み込みが行われなかった。

nuxt.config.js

  head: {
    titleTemplate: '%s - Nuxt.js',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Meta description' },
    
//Webフォント部分
    link: [{
      rel: 'stylesheet', 
      href: 'https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap'
    }]
  }
}

Nuxt.js公式 head プロパティ
Google Font (Noto Sans JP)

やり方

.storybook 配下にpreview-head.htmlというファイルを作成し、
nuxt.config.jsに記述した内容で記述する。（というか、普通にHTMLで読み込ませるときの記述をする。）

preview-head.html

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">

これでStorybookで読み込みが行われるので、
font-familyなりで適応させることができます。

default.vueでFontを当てていた場合

Storybookではdefault.vueが読み込まれないので、
.sotrybook/style.cssに読み込みを記述すれば解決します。

.storybook/style.css

html {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
}