いままで問題なく表示されていたものが急にうまくいかなくなることはよくあることです。
Adobeが提供しているフォントサービス「Adobefonts」を利用して表示させていたwebフォントがIE11で表示されなくなり困りました。
IE11のコンソール画面を見てみるとjavascriptでエラーが発生しているようです。
Promiseが定義されていません
このようなメッセージが出ていました。
フォントを読み込むためにadobeから提供されている埋め込み用コードが変更され「Promise」を使用するコードになったためPromiseに対応していないIE11では読み込むことができなくなってしまったようです。
Promiseとは?
javascriptのオブジェクトです。これを使うことによって非同期処理の順序を思いどおりに組みやすくなります。
ES2015(ES6)バージョン以降のjavascriptから導入されています。
IE11はES6は未対応なのでPromiseは使用できないのです。
ではIE11では完全に使用できないのか?
世の中には親切な人達がいて最近の機能を使用できない古いブラウザで新しい機能を使用可能にするためのコードを提供してくれていたりします。そのコードをPolyfill(ポリフィル)といいます。
PromiseにもそのPolyfillが存在します。
▼ここにPromiseのPolyfillのURLが書いてあります。
https://www.promisejs.org/
※注意点
- Browserという見出しのscriptタグを使用しなければいけません。
※2021年11月26日現在のscriptタグ
<script src="https://www.promisejs.org/polyfills/promise-7.0.4.min.js"></script>
↑これをheadタグ内に記入しておけばPromiseが作動し、IE11でもAdobefontのwebフォントの読込が開始されます。
最後に
webフォントは制作時点ではとても便利です。
が、運用・保守に入ったときに問題がでてくることがあるので定期チェックは必要だと改めて思いました。
また、Adobeサービスは丁寧にコード変更のお知らせがあるわけではないという事も頭に入れておこうと思います。