viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方はこちらまで。

結論

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

経緯

現在Nuxt3の開発中のサービスでAdobe Fontsを使うことに

デザイナーさんからAdobe Fonts用のコードを共有してもらう

<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>

Nuxt3でAdobe Fontsを読み込むベストプラクティスがないか調べてみたら Nuxt Fonts なるものを発見

Nuxt Fontsとは

特徴

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

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

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

神！！！

ということで使ってみた

インストール
今回はyarnを使っているためyarnコマンドでインストール
```
yarn add @nuxt/fonts
```

nuxt.config.ts に以下の設定追加

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxt/fonts',
  ],
  fonts: {
    adobe: {
      id: ['<kit-id>'],
    },
  }
})

.gitignore に以下の設定がなければ追加
.gitignore
```
.data
```

CSSで font-family を設定
.cssファイル、.vue または .tsファイルの <style>内のfont-familyはもちろん、tailwind.config.js で定義しているfont-familyも検知してくれる。

tailwind.config.js

export default {
  theme: {
    extend: {
      fontFamily: {
        base: ['"m-plus-rounded-1p"', 'BlinkMacSystemFont', '-apple-system', ...以下省略],
      },
    },
  },
}

反映され・・・てない！？

※ ChromeのDevTools → 要素 → 計算済み → font-familyで絞ると確認できます。

試しにGoogle Fontsで使える別のフォントを設定してみた

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', ...以下省略],
      },
    },
  },
}

反映されてる・・・

原因調べてみた

Adobe Fontsだけ対応してなかった（普通に書いてあった・・・）
現在、Adobe FontsではパブリックAPIが提供されていないため無理とのこと・・・

※ 参照元(公式): https://fonts.nuxt.com/get-started/providers#adobe

そのため今回は普通にnuxt.configに設定追加してAdobe Fontsを読み込んだ。

nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://use.typekit.net/<kitId>.js',
        },
      ],
    },
  },
})

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>

おわり

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

参考記事

一緒に二次元業界を盛り上げていきませんか？

株式会社viviONでは、フロントエンドエンジニアを募集しています。

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