AWS Amplify環境のSPAで"Failed to decode downloaded font"への対処

SPA（Single Page Application）をAWS Amplifyにデプロイしたところ、"Failed to decode downloaded font" というエラーが発生しました。その対処方法の覚え書きです。

▍状況

環境は以下の通りです。Amplifyの設定によるものなので、SPAであればVue 3以外でも発生するはずです。

• フロントエンド環境：Vue.js（v3）

• ホスティング環境：AWS Amplify

• Webフォント：ダウンロード利用（埋め込みでない）

Webフォントはソースディレクトリ内に格納しており、CSSからは次のように呼び出しています。@ はVue.jsにけるソースディレクトリのエイリアスです。

@font-face {
  font-family: 'Noto Sans JP';
  src: url('@/assets/fonts/NotoSansJP-Light.otf') format('opentype');
}

ローカル環境では正しく読み込まれていましたが、Amplifyにデプロイすると "Failed to decode downloaded font" というエラーが発生しました。

▍解決方法

Amplifyのアプリの設定の「リライトとリダイレクト」の設定を見直しました。具体的には、入力「200（リライト）」の送信元アドレスに、該当のフォントファイルの拡張子を追加しました。うちの環境ではotfとwoff2を追加しています。

同様のことは AWS AmplifyのGitHubのIssue でも挙げられていました。

また、うちは該当しませんでしたが、改行コードの問題で同様のエラーが発生することもあるらしいです。その対処方法の記事も貼っておきます。

アイコンフォントをgit管理するとファイルが破損するときの対応方法 | jMatsuzaki

▍オマケの解説

以下は仕組みの話です。ご参考までに。

SPAでは一般的に全てのリクエストを index.html に対して送信します。そして、SPAのルーティング設定によってリクエストされたコンテンツを表示します。例えば「/about」へのリクエストであっても index.html が受け付け、該当のコンテンツを表示します。

しかし、画像やCSSやフォントといった静的ファイルについては、index.html ではなく、それぞれのURLに直接アクセスすべきです。

Amplifyの上記の設定は、index.html へのリライト対象の設定です。リライトはリダイレクトの一種です。例えば「/about」のリクエストを index.html に送るものです。

送信元アドレスは正規表現で書かれており、特定の拡張子"以外"がリライトの対象になっています。つまり、「基本的には index.html にリライトするものの、一部のものを除外指定する」ということです。前述の通り、画像やフォントなどの静的ファイルについてはリライトが不要なので、この除外指定に加えてあげます。

うちの環境ではotfとwoff2が足りていなかったので、それらを加えることでエラーを解消しました。以下の記事を見ると既定でwoff2も除外指定に入っているようなので、既定値は最初にデプロイした時期の違いもあるかもしれません。

Using redirects - AWS Amplify Hosting

▍おわりに

SPA、Webフォントダウンロード、Amplifyという環境におけるエラーとその対処について解説しました。同じ問題に直面した方の助けになれば幸いです。

---

私たちのデジタル技術活用のメモが次のマガジンにあります。よろしければ覗いてみてください！

うちのデジタル便り｜まなび梯｜note