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の利用を回避するか、漢字が引っかかっているのであれば仮名で扱うような回避方法が考えられます。
このあたりの事はコンテンツを操作しながらデバッグして原因になる部分を特定してみないとどのように対応するのがベストなのか判断が難しいです。