Nuxt Fontsを使ってAdobe Fontsを読み込もうとした話

:::note info
viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方は[こちら](#一緒に二次元業界を盛り上げていきませんか)まで。
:::

## :point_up_tone1:結論
- 現時点(2024/12/9)では、**Adobe Fontsはまだ対応していない**ため使えない
- 対応しているWebフォント(Google Fontsなど)であれば設定楽々で便利そう

## :feet:経緯
1. 現在Nuxt3の開発中のサービスでAdobe Fontsを使うことに
2. デザイナーさんからAdobe Fonts用のコードを共有してもらう
    ```jsx
    <script>
      (function(d) {
        var config = {
          kitId: '<kit-id>',
          scriptTimeout: 3000,
          async: true
        },
        h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f%7C%7Ca&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
      })(document);
    </script>
    ```        
3. Nuxt3でAdobe Fontsを読み込むベストプラクティスがないか調べてみたら [Nuxt Fonts](https://fonts.nuxt.com/) なるものを発見

## :question:Nuxt Fontsとは
### 特徴

1. ✨ 設定不要で簡単に使える
    インストールするだけで、CSSの`font-family`を解析し、必要なフォントを自動的に取得・提供してくれる。
2. 🔡 多くの組み込みプロバイダーに対応
    Google Fonts、Bunny Fonts、Fontshare、Fontsource、Adobe Fonts、ローカルフォントなど。
3. 💪 カスタムプロバイダーに対応
    必要に応じて独自のフォントプロバイダーを設定できる。
4. ⏬ ローカルダウンロードのサポート
    フォントをローカル保存して利用できる。（Nuxtの`nuxt/assets`が正式リリースされるまでのサポート機能らしい）
5. [**⚡️ fontaine**](https://github.com/unjs/fontaine)と[**capsize**](https://github.com/seek-oss/capsize)による自動フォントメトリック最適化    
    「Fontaine」と「Capsize」というツールを活用してCLS最適化が自動で行われる。(これにより、ページの読み込みがスムーズになる）
6. [**🔥 unstorage**](https://github.com/unjs/unstorage)によるビルド/開発時のフォントキャッシュ
    「unstorage」というキャッシュシステムを利用して、ビルドや開発中にフォントの読み込みが効率化される。これにより、開発体験が快適になる。

※ 参照元(公式): https://nuxt.com/modules/fonts#features

<br>
Google Fontsなど有名どころのプロバイダーであれば少しの設定追加しただけで対応できるとのこと！！

神！！！:pray_tone1::sparkles:

## :v_tone1:ということで使ってみた
1. インストール
    今回はyarnを使っているためyarnコマンドでインストール    
    ```bash
    yarn add @nuxt/fonts
    ```
    <br>
2. `nuxt.config.ts` に以下の設定追加
    ```tsx:nuxt.config.ts
    export default defineNuxtConfig({
      modules: [
        '@nuxt/fonts',
      ],
      fonts: {
        adobe: {
          id: ['<kit-id>'],
        },
      }
    })
    ```
    <br>
3. `.gitignore` に以下の設定がなければ追加
    ```:.gitignore
    .data
    ```
    <br>
4. CSSで font-family を設定
    `.css`ファイル、`.vue` または `.ts`ファイルの `<style>`内の`font-family`はもちろん、`tailwind.config.js` で定義している`font-family`も検知してくれる。
    ```jsx:tailwind.config.js
    export default {
      theme: {
        extend: {
          fontFamily: {
            base: ['"m-plus-rounded-1p"', 'BlinkMacSystemFont', '-apple-system', ...以下省略],
          },
        },
      },
    }
    ```
    <br>
5. 反映され・・・てない！？
    ![スクリーンショット 2024-12-12 0.21.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3803435/bfaf2017-56fe-564f-1ca9-8ee20ce3e290.png)
    ※ ChromeのDevTools → 要素 → 計算済み → font-familyで絞ると確認できます。
    <br>
6. 試しにGoogle Fontsで使える別のフォントを設定してみた
    ```diff_javascript:tailwind.config.js
    export default {
      theme: {
        extend: {
          fontFamily: {
    -       base: ['"m-plus-rounded-1p"', 'BlinkMacSystemFont', '-apple-system', ...以下省略],
    +       base: ['"Noto Sans JP", "m-plus-rounded-1p"', 'BlinkMacSystemFont', '-apple-system', ...以下省略],
          },
        },
      },
    }
    ```
    <br>
7. 反映されてる・・・
    ![スクリーンショット 2024-12-12 0.29.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3803435/4cf1912a-f08d-0b21-3192-213fd33648d3.png)

## :mag:原因調べてみた
Adobe Fontsだけ対応してなかった（普通に書いてあった・・・）
現在、Adobe FontsではパブリックAPIが提供されていないため無理とのこと・・・
![スクリーンショット 2024-12-12 0.33.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3803435/f497d6ef-86b6-1433-c557-91da4e816587.png)
※ 参照元(公式): https://fonts.nuxt.com/get-started/providers#adobe

<br>

そのため今回は普通に`nuxt.config`に設定追加してAdobe Fontsを読み込んだ。
```tsx:nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://use.typekit.net/<kitId>.js',
        },
      ],
    },
  },
})
```

```jsx:layouts/Default.vue
<script setup lang="ts">
onMounted(() => {
  try {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    Typekit.load({ async: true })
  } catch (error) {
    console.error(error)
  }
})
</script>
```

## :triangular_flag_on_post:おわり
Nuxt3でWebフォントを使用する際、Adobe Fontsはまだ対応してなかったものの、
Google Fontsなどの対応しているWebフォントであれば簡単に使える上に、
パフォーマンス面も良しなに調整(CLS最適化)してくれるのでとても便利！！

## 参考記事
- https://nuxt.com/modules/fonts
- https://fonts.nuxt.com/
- https://zenn.dev/ftd_tech_blog/articles/ftd-nuxt-2024-02-29



# 一緒に二次元業界を盛り上げていきませんか？
株式会社viviONでは、フロントエンドエンジニアを募集しています。

https://vivion.jp/recruit/

また、フロントエンドエンジニアに限らず、バックエンド・SRE・スマホアプリなど様々なエンジニア職を募集していますので、ぜひ採用情報をご覧ください。