WEBフォントの不具合顛末

近頃アイコンフォントをWEBで使えるようになったので積極的に導入しているのですが、iPhone6
のSafariだけで表示できない事例が発生して情報も少なくてほとほと困っていました。

①iPhone6

Chrome:表示できる、Safari:表示できない

②iPad

Chrome & Safari:表示できる

③iPhone5

Chrome & Safari:表示できる

一番新しい端末のiPhoneのSafariだけが表示できないということで、端末の方の設定を見直していったところ、ようやくわかりました。
iOSの新しい機能「コンテンツブロッカー」です。

サードパーティーのフィルタを利用して、Safariで見た時のWEBページ内の広告やプログラム等をブロックすることで動作を軽くするという機能。
フィルタのアプリ自体はたくさんあるのですが、その中に「カスタムフォント」をブロックする機能があるものがいくつかありました。
ブログ等の本文にカスタムのWEBフォントを利用すると、場合によって動作が重くなってしまうこともあるので、それをブロックしているわけですね。
アイコンだけの利用の場合、いくつかのSVG等のファイルを読み込むだけなのでさほど表示に負荷はかからないのですが、一緒にブロックされてしまっていました。Oh…
アイコン等をフォントで使うと、ベクターデータなので画面の大きさや解像度に左右されずきれいに表示されるのでレスポンシブ的にはたいへん便利だしスマートで素敵なんですけどねー。
コンテンツブロッカーは個々人の端末設定になるのでサイト制作側ではコントロールできません。アイコンフォントは飾りとしての利用に止めて、ナビゲーション等の表示されていないと致命的に困るようなものは従来通り@2xや@3xの画像を使うしかないようです。スマートじゃないわー