Invalid font data in ArrayBuffer.エラーを解消したい

[祐22110274f0is]

11/23~28にかけてAdobe Fontsでウェブフォントを利用しているサイトでInvalid font data in ArrayBuffer.エラーが頻発しています。

約25.8kもの通知がbugsnagに届いています。

ただ、指定しているフォントはサイトに適用されています。

エラー自体は、https://use.typekit.net/{kitId}.jsで発生しているのですが

どなたかお知恵を貸していただけますと幸いです。

---

◼︎利用しているフォント

• DNP 秀英角ゴシック銀 Std

◼︎試したこと

1. 別のフォントに変更
   →レビュー環境で同様のエラーが発生
2. 別プロジェクトを作成し同じフォントを指定。kitIdを変更

→レビュー環境でエラー解消を確認。本番環境に反映すると同様のエラーが発生

◼︎Adobeサポートの回答

・スクリプトについてはサポートを行っていない為、情報がなく具体的なご案内が難しい状況になっている

[Ten A]

これ、特定のグリフを読み込む時に発生していませんか？
Stdは収容グリフ数が少ないので他のAdobe-Japan1-4に対応したフォントに変更するとどうでしょうか？

[祐22110274f0is]

Ten Aさんご返信ありがとうございます。

収録文字数が多い小塚ゴシック Pr6Nを指定しましたが、ローカル環境、レビュー環境で同様のエラーが発生し、解消に至らずといった状況です。
https://fonts.adobe.com/fonts/kozuka-gothic-pr6n

bodyに以下を指定しています。

font-family: "kozuka-gothic-pr6n", "Hiragino Sans", "メイリオ", "Meiryo", sans-serif;
font-style: normal;
font-weight: 500;

---

試しにGoogleフォントを指定してみたところInvalid font data in ArrayBuffer.エラーはどのページでも発生しませんでした。

https://zenn.dev/gekitenius/scraps/3e8390b14ef63c のように地道にエラーが発生する文字を特定するかGoogleフォントで代替フォントを探すのがよいのでしょうか。。

[Ten A]

当該エラーは基本的にフォントデータが正常に読み込まれない事が原因になるのですが、ブラウザーのキャッシュが影響しているケースも考えられます。あと思いつくのはCORSをはじめとしたセキュリティに絡む問題でフォントデータ自体が落ちてこないケースでしょうか。
デベロッパーツールでフォントファイルの読み込みは確認されましたか？

[祐22110274f0is]

Ten Aさんご返信ありがとうございます。

エラーが発生しているサイトだとフォントファイルは以下のように読み込まれています。

エラーは出ていますが、サイトの表示にフォントは反映されています。

 同じフォントを設定している別のサイトだとフォントファイルは読み込みされているようです。

また、エラーが発生しているブラウザは、GoogleChrome, Edgeでした。

safari, firefoxでは発生していません。

CORSをはじめとしたセキュリティに絡む問題でフォントデータ自体が落ちてこないケースは、ユーザーの環境依存となり、発生ユーザーも1000以上となるため、こちらは対策が難しいと考えています。

ブラウザーのキャッシュが影響しているケースについて、以下の対策を検討しています。

1. キャッシュをクリアし、新しいフォントデータを取得する
   
2. サーバーからフォントファイルを再生成して正しいデータを提供する。
   
   タイムスタンプをadobe fontのプロジェクトを埋め込みのスクリプトに追加するなどで改善できるものなのでしょうか。
   

[Ten A]

う〜ん、他のサイトでエラーが出ないとなるとサーバーの仕様によるものなのかもしれませんが、やはり特定のグリフが得られなくてその部分だけ他のフォントにフォールバックしている可能性があるように思います。そうだとすると、コンテンツの内容に由来するものですからAdobeFontsの利用を回避するか、漢字が引っかかっているのであれば仮名で扱うような回避方法が考えられます。
このあたりの事はコンテンツを操作しながらデバッグして原因になる部分を特定してみないとどのように対応するのがベストなのか判断が難しいです。

[祐22110274f0is]

ご返信ありがとうございます。

特定のグリフや漢字が引っかかっている可能性への対応ですが、サイトの性質上、ユーザーが自由記入を行う仕様なため、完全な制御は難しいと判断しました。

対応としては、日本語フォントの文字セットの設定を、デベロッパーツールでdisabledを解除し無理やりデフォルトに変更しました。

この対応で別のサイトと同様にフォントデータがすべて読み込まれるようになり、エラーは解消いたしました。

ダイナミックサブセットの設定ですが、Adobe Fontsのウェブプロジェクトの設定以外で行うことはできるのでしょうか？

可能であればダイナミックサブセットで読み込んで読み込むデータ量を軽減したいと思っています。

[Ten A]

設定ができるのはプロジェクト設定だけですね。それと、元々日本語フォントであればダイナミックサブセットは選択状態から変えられません。

日本語フォントの場合フルセットになるとゴシック体のようなシンプルなパス構成でも3MB以上、アンカーポイントの多いデザインフォント等では10MB以上のデータとなる事も多いです。CJKフォントまわりでサブセット化を外すのは現実的ではない側面もあります。