Nuxt.js v3, Storybook v7の環境にWeb Fontsを追加する（Google Fonts, Adobe Fonts）

Nuxt.js v3の環境でWeb Fontsの導入を行なったため、導入方法について紹介します。 また、Storybookについても同様に追加したため、その方法についても紹介します。

前提

今回は以下のFontを追加していこうと思います。

Google Fonts

fonts.google.com

Adobe Fonts

fonts.adobe.com

また、使用するバージョンについても以下になります。

• Nuxt.js: 3.8.1
• Storybook: 7.5.3

Google Fontsの追加

1. Google Fontsの情報を取得

Google Fontsの該当サイトで以下のような設定を行います。

fonts.google.com

1. 使用するフォントを選択
2. <link>か@importの選択ができるので、今回は<link>を選択します。（@importの方でも問題ありません。）
3. 「CSS rules to specify families」の部分をコピーしておきます。

2. Nuxt.jsに追加

注意: ここで紹介する方法よりも追記の方が適切なため、そちらをご覧ください。

直接読み込む方法を見てみる

nuxt.config.tsのapp.headのエリアに<link>から取得してきた内容を記載することで使用することができます。

・nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        {
          rel: 'preconnect',
          href: 'https://fonts.googleapis.com',
        },
        {
          rel: 'preconnect',
          href: 'https://fonts.gstatic.com',
          crossorigin: '',
        },
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap',
        },
      ],
    },
  },
})

追記

上記の方法でも問題なくできますが、@nuxtjs/google-fontsのモジュールを使用する方がフォントをプリロードできたり・フォント周りをローカルのプロジェクトにダウンロードしてくれたりと便利なので、@nuxtjs/google-fontsのモジュールを使用する方をお勧めします。

github.com

google-fonts.nuxtjs.org

基本、以下の通りに行えば問題ありません。

google-fonts.nuxtjs.org

パッケージのインストール

$ yarn add -D @nuxtjs/google-fonts

以下のコードを記載

・nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/google-fonts'],
  googleFonts: {
    families: {
      Manrope: [400, 700],
    },
  },
})

・該当のscssファイルなど

$fontFamily: 'Manrope', sans-serif;
body {
  font-family: $fontFamily;
}

3. Storybookに追加

storybookでGoogle Fontsの読み込みを行いたい場合、以下の設定を行うことで読み込まれるようになります。

storybook.js.org

・.storybook/preview-head.html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap" rel="stylesheet">

・Storybook用のSCSSファイル

/* Nuxt.jsと共有のcssを使用している場合は記載を行わなくてもよいです。 */
$fontFamily: 'Manrope', sans-serif;
body {
  font-family: $fontFamily;
}

Adobe Fontsの追加

Adobe Fontsの詳細はこちらをご覧ください。

www.adobe.com

1. Adobe Fontsの情報を取得

1. webプロジェクトに追加をクリック
2. 追加するプロジェクトを選択した後に、「決定」をクリック
3. 出力されるscriptやstyleをそれぞれコピーしておきます。

fonts.adobe.com

2. Nuxt.jsに追加

参考記事

zenn.dev

nuxt.config.tsに以下を記載。

・nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://use.typekit.net/{プロジェクト ID}.js',
        },
      ],
    },
  },
}

全体で読み込みを行なっているファイルに対して、以下を記載。

onMounted(() => {
  Typekit.load({ async: true })
})

・該当のscssファイルなど

$fontFamily: "kinto-sans", sans-serif;
body {
  font-family: $fontFamily;
}

3. Storybookに追加

storybookについてもGoogle Fontesの時とほぼ同様に以下のファイルにscriptを追記すればフォントが適応されます。

・.storybook/preview-head.html

<script src="https://use.typekit.net/{プロジェクト ID}.js"></script>
<script async>
    Typekit.load({ async: true })
</script>

・該当のscssファイルなど

/* Nuxt.jsと共有のcssを使用している場合は記載を行わなくてもよいです。 */
$fontFamily: "kinto-sans", sans-serif;
body {
  font-family: $fontFamily;
}