🔴

古いiOS SafariではFontFaceに記号や数字から始まるフォント名を指定するとエラーになるっぽいから避けよう

2021/12/26に公開

iOS13 Safariでは問題なくアプリケーションが動くのに、なぜかiOS12では全く動作しないということがあり、(babelやポリフィル処理もしてるのでES関係のエラーではない)調べてみると以下のFontFaceを使った処理でエラーが出てたようです。

// ※簡易化のため、一部修正
const fontface = new FontFace("@foo_fontName", `url('${fontPath}')`);
await fontface.load();
document.fonts.add(fontface);

エラー内容が曖昧だったのですぐに原因がわからなかったのですが、以下の質問エントリからヒントを得て、フォント名前冒頭の@記号を消してみたら正常に動作するようになりました。
開発事情により、特殊なスコープ付きの名前をつけてたことが災いしました☠。

https://stackoverflow.com/questions/56639922/how-do-i-load-fonts-with-filenames-which-begin-with-numbers-via-the-fontface-in

また上記エントリによると数字で始まる場合もNGのようです。
フォントにはたまに名前が数字で始まるフォントもあるので、(古いiOSのサポートを考えている場合)そのままfontface名にしてしまわないよう注意が必要です。

その他

  • 13では発生しないことからおそらくバグだったのではないかと思われます
  • この問題に限らず、よほどの事情がない限り、文字列の冒頭に記号やら数字をつけるのは避けたほうがいいでしょう…

Discussion