🖊️

nuxt3にてAdobe Fonts(旧Typekit)の和文・アジア言語書体を読み込む.

2022/10/25に公開

Adobe Fontsの日本語フォントに関する仕様: ダイナミックサブセット

詳しいことは知らないが,Adobe Fontsで日本語書体を表示しようとするとき,ダイナミックサブセットという仕組みでフォントを配信する.これは文字数の多いフォント(というか日本語・中国語・韓国語の書体)について,HTML内を解析し必要な文字だけを収集するシステムである.図説すると,下図の下の方と同じ.

ダイナミックサブセットの説明

この仕組みを採用しているフォント提供者は大抵JavaScriptのプログラムを提供しており,これを実行することでサブセットに必要な文字を取得するという算段なわけだ.
Adobe Fontsなら以下のようなものだろう.(プロジェクトIDは使用しているものなので秘匿しています.)
Adobe Fontsで提供されているやつ

さて,これをそのままNuxtのプロジェクトに突っ込むとどうなるか.

怒られた.document is not definedだそうだ.
500 -- document is not defined

解決策: Typekit APIを使用する

Adobe FontsはAPIを提供してるので,これを使用すれば問題なく読み込まれる.UseHeadにTypekitのAPIのためのJSファイル:https://use.typekit.net/${プロジェクトID}.jsを読みこもう.

なお,文字の読み込みのために,描画完了後に実行されるmountedに読み込みのプログラムを仕込む必要がある.
以下のように実装すれば良い.

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
<script setup>
useHead({
  title: 'フロントページ',
  script: [
    {
      src: 'https://use.typekit.net/sy*****.js',
    },
  ],
});
</script>
<script>
export default{
  mounted() {
    try {
      Typekit.load({ async: true });
    } catch (e) {
      console.log(e);
    }
  }
}
</script>

Discussion