Adobe Fonts をJSで後からレンダリングするコンテンツに適用したい
2021/12/05
Adobe Fonts
Typekit
2018年に Typekit から Adobe Fonts に変更された
日本語用のWebフォント(ダイナミックサブセット)をJSでレンダリングされるコンテンツに適用したい
ふと疑問に思ったのは、日本語等の文字数が多い言語圏ではダイナミックサブセット(JSでページ内の文字を読み込んでその文字のフォントだけをダウンロードする)でWebフォントを適用するやり方が一般的。
問題はデフォルトの埋め込みコードではおそらく「ページ読み込み時に存在する文字しかダイナミックサブセットで読み込まれないのではないか」ということ。
つまり、普通のHTMLにテキストが記述されているページならば問題ないですが、AJAXでコンテンツ後読みしているとか、React.jsやVue.jsによってJSでコンテンツをレンダリングしているケースは、意図したサブセットが生成されないのではないか、ということ。
- 【jQuery】追加した文字列にWebフォントを適用する - Web制作会社トライム
- Nuxt.jsでAdobeのTypekitを使う方法 - はりうすブログ (のすけのメモ)
- Nuxt.jsでいい感じにAdobe fontsのwebフォントを読み込む - Qiita
- NuxtでAdobe Fontsを利用する（日本語対応） | eureka
やはり、思った通りそのままではNGのようです。実際に挙動を確認したわけではないですが。
Web Font Loader
- Webフォントが読み込まれてからJSを実行させたい時に便利な「Web Font Loader」 - KOHIMOTO LABO
- JSでWebフォントのロード開始や完了などを判定するWeb Font Loader | ITハット
Web Font Loader というパッケージもあるようですが、一部記事では効果がなかった、という記載も見受けられたため、使用できるかどうかはケースバイケースなのかもしれません。