Skip to main content
Participant
November 28, 2024
Question

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

  • November 28, 2024
  • 3 replies
  • 1761 views

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サポートの回答

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

 

This topic has been closed for replies.

3 replies

Ten A
Community Expert
Community Expert
December 5, 2024

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

Participant
December 16, 2024

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

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

 

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

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

 

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

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

 

Ten A
Community Expert
Community Expert
December 16, 2024

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

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

Ten A
Community Expert
Community Expert
December 3, 2024

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

Participant
December 4, 2024

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

 

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

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

 

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

 

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

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

 

 

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

 

 

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

  1. キャッシュをクリアし、新しいフォントデータを取得する
  2. サーバーからフォントファイルを再生成して正しいデータを提供する。

    タイムスタンプをadobe fontのプロジェクトを埋め込みのスクリプトに追加するなどで改善できるものなのでしょうか。

 

Ten A
Community Expert
Community Expert
November 29, 2024

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

Participant
December 3, 2024

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フォントで代替フォントを探すのがよいのでしょうか。。